Apr
14

鼠标滑过停留效果     2009

 16:20    437    0   noel 程序 代码 源码 不指定 | |
做web的不可能没用到onmouseover事件,但是我们在使用网站的时候会发现我们把鼠标移到一个链接上的时候意外发生了,由于鼠标经过了一个有onmouseover事件标签,你移向的区域的内容就变了,有些用户就会觉得莫明奇妙了。有一个网站已经对些做了处理,但是大部份不有了。

这个问题怎么解决呢,我们想想看如果用户真提是想把鼠标移上来他一点会有所停留。如果只是经过那停留的时间就会很短。经过分析后我们可以有解决办法了:

1.鼠标移到标签一定时间才执行所在发生的事件。

2.时间没到就停止事件的发现。

这里我们需要用到setTimeout,clearTimeout来实现,具体看代码。

<script type="text/javascript"><!--
var OMO = null;
function _onmouseover(evt) {
  OMO = setTimeout(evt,300);//300毫秒后再执行
}
function _onmouseout() {
  clearTimeout(OMO);//鼠标移出后就清除事件的产生
}

// 这个是你自己定义的onmouseover事件
function overEvent(v) {
  alert(v);
}
// --></script>

试试效果:1快速从灰色区经过。2移到上面停留
<div style="background: #cccccc none repeat scroll 0% 0%; width: 120px; height: 20px;" onmouseover="_onmouseover('overEvent(\'abc\')')" onmouseout="_onmouseout()">鼠标移到这里来</div>

作者:noel@淘宝网女装新款秋装连衣裙裤子外套上衣_2012时尚女装新款 Ecmall二次开发-PHP技术
地址:http://www.laohucheng.com/post/315/
版权所有©转载时必须以链接形式注明作者和原始出处及本声明!

Tags: 引用(0)
发表评论
昵称 [注册]
密码 游客无需密码
网址
电邮
打开HTML 打开UBB 打开表情 隐藏 记住我