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程序设计有所帮助。