jquery实现TAB选项卡鼠标经过带延迟效果的方法
本文实例讲述了jquery实现TAB选项卡鼠标经过带延迟效果的方法。分享给大家供大家参考。具体如下：
如果你想实现鼠标停留在DIV上面N秒后才执行某些函数，或者类似下面的TAB切换时不经过之间的显示，用下面的方法可以实现。
<!doctypehtml>
<html>
<head>
<metacharset="utf-8">
<title>hoverTAB有延迟显示的效果</title>
<styletype="text/css">
*{padding:0;margin:0;list-style:none;font-size:12px;}
.mytab{background:#007373;width:600px;margin-top:100px;margin-right:auto;margin-left:auto;height:230px;}
.mytab.titleli{float:left;width:100px;height:30px;line-height:30px;text-align:center;background:#099;border:1pxsolid#FFF;margin-left:14px;margin-top:14px;}
.mytab.contentli{line-height:200px;text-align:center;height:200px;width:600px;clear:both;}
.mytab.titleli.cur{color:#000;background:#FFF;font-weight:bold;border:1pxsolid#000;}
a{color:#FFF}
.mytab.titleli.cura{color:#000;}
</style>
<scriptsrc="js/jquery.min.js"type="text/javascript"></script>
<script>
$(function(){
vart_li=$(".mytab.titleli")
varc_li=$(".mytab.contentli")
t_li.hover(function(){
vari=t_li.index($(this));
functionway(){
t_li.removeClass("cur").eq(i).addClass("cur");
c_li.hide().eq(i).show();
}
timer=setTimeout(way,500);
},function(){
clearTimeout(timer);
});
});
</script>
</head>
<body>
<divclass="mytab">
<ulclass="title">
<liclass="cur"><ahref="/php/"target="_blank">PHP教程</a></li>
<li><ahref="/"target="_blank">JS特效</a></li>
<li><ahref="/"target="_blank">CSS布局</a></li>
<li><ahref="/js_tab/"target="_blank">TAB选项卡</a></li>
<li><ahref="/js_pic/"target="_blank">幻灯片</a></li>
</ul>
<ulclass="content">
<li>内容1</li>
<listyle="display:none;">内容内容2</li>
<listyle="display:none;">内容内容内容3</li>
<listyle="display:none;">内容内容内容内容4</li>
<listyle="display:none;">内容内容内容内容内容5</li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的jquery程序设计有所帮助。
热门推荐
3 祝福语简短的微信
10 幼儿祝福语大全简短贺卡
11 感谢教官文案祝福语简短
12 鼠年同事祝福语简短创意
13 元旦祝福语 简短独特群发
14 妈咪跟我生日祝福语简短
15 给儿子新婚祝福语简短
16 伴娘祝福语长文案简短
17 恭喜高考完祝福语简短
18 生日祝福语送老公简短