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程序设计有所帮助。
热门推荐
10 五一公司放假祝福语简短
11 追星女孩的祝福语简短
12 给长辈端午祝福语 简短
13 生日祝福语有诗意简短
14 团圆日祝福语简短
15 中秋商务祝福语简短最新
16 温暖文艺简短祝福语短句
17 男孩上学祝福语简短的
18 入住酒店文案祝福语简短