网页中的滚动字幕,是通过marquee来实现的,在其语法中,onMouse事件是比较关键的,可以实现很多我们想要实现的特殊动态效果。
本文,着重为你介绍onMouse事件详解及实例。
onMouse这个参数,也称为鼠标事件参数,即鼠标在滚动字幕区域之内所实现的动态效果。
一、onMouse的五种事件
鼠标事件参数,共分为五种情况,分别是:
onMouseDown:指的是鼠标按下时所触发的事件。
onMouseUp:指的是鼠标按下后松开时所触发的事件。
onMouseOver:指的是鼠标移动到某对象范围之内所触发的事件。
onMouseOut:指的是鼠标离开对象范围时所触发的事件。
onMouseMove:指的是移动鼠标时所触发的事件。
二、onMouse的实例
①简单例子
<marquee onmouseover=this.stop() onmouseout=this.start() direction=up scrollamount=14 scrolldelay=800 scrollleft=0 scrolltop=0>
<div >大众计算机</div>
<div >大众三七</div>
</marquee>
上面的滚动字幕marquee使用了两种onmouse事件,分别是:onmouseover=this.stop(),onmouseout=this.start() 前者代表鼠标移动到滚动字幕范围之间,就停止滚动;后者代表鼠标离开滚动字幕这个范围,字幕又开始接着滚动。这种效果一般用于公告栏或者是列表信息。
②结合JS的例子
<script type="text/javascript">
function mouseOver()
{
document.getElementById('MyLink1').src ="/图片路径/图片名称.jpg"
}
function mouseOut()
{
document.getElementById('MyLink1').src ="/图片路径/图片名称1.jpg"
}
</script>
<a HREF="" onmouseover="mouseOver()" onmouseout="mouseOut()"><img alt="dzwebs Pic!" src="/图片路径/图片名称.jpg" id="MyLink1" /></a>
上面的并未使用滚动字幕,而是直接使用onmouse参数。结合了JS代码实现特殊效果,鼠标移动到超级链接上,会显示一张图片;鼠标离开超级链接后又显示另外一张图片。