Dzwebs.Net

撰写电脑技术杂文十余年

滚动字幕marquee onMouse事件详解及实例

Admin | 2014-3-3 10:03:44 | 被阅次数 | 10476

温馨提示!

如果未能解决您的问题,请点击搜索;登陆可复制文章,点击登陆

  网页中的滚动字幕,是通过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代码实现特殊效果,鼠标移动到超级链接上,会显示一张图片;鼠标离开超级链接后又显示另外一张图片。


该杂文来自: 网页制作杂文

上一篇:js翻页下一页

下一篇:点击超级链接弹出对话框

网站备案号:

网站备案号:滇ICP备11001339号-7

版权属性:

Copyright 2007-2021-forever Inc. all Rights Reserved.

联系方式:

Email:dzwebs@126.com QQ:83539231 访问统计