- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <meta http-equiv="Content-Type" content= "text/html; charset=utf-8" />
- <style>
- ul,li{
- background-color:#999;
- margin:0px;
- padding:0px;
- list-style:none;
- color:#fff;
- }
- li{
- padding:3px;
- float:left;
- margin-right:2px;
- border:#FFF 1px solid;
- }
- div{
- clear:left;
- height:150px;
- width:300px;
- background-color:#666;
- display:none;
- }
- li.tabin{
- background-color:#666;
- border:#666 solid 1px;
- }
- div.contentin{
- padding:3px;
- display:block;
- color:#FFF;
- }
- </style>
- <title>jQuery实现常见的滑动门效果</title>
- <script language="javascript" type= "text/javascript" src= "../include/jquery-1.5.1.min.js" ></script>
- <script type="text/javascript" >
- var timeoutid;
- $(function (){
- /*
- 实现滑动门核心
- 1、把当前样式(li、div选中状态)移除
- 2、设置鼠标移动到的当前li对象的样式选中状态
- 3、设置鼠标移动到的当前li对象所对应的div的样式选中状态
- 如何设置当前li对象所对应的div为选中状态?
- 解决:遍历所有的li并且根据当前li对象的索引值去设置对应索引值的div
- */
- //遍历所有的li
- $("li" ).each( function (index){
- //处理鼠标移动到li上的事件
- $(this).mouseover(function (){
- var liObj=$(this);
- timeoutid=setTimeout(function (){
- //清空所有的处于选中状态的样式
- $("li.tabin" ).removeClass();
- $("div.contentin" ).removeClass();
- //设置当前li索引值对应的div
- $("div" ).eq(index).addClass( "contentin" );
- //设置当前的li和当前li所对应的div
- liObj.addClass("tabin" );
- },300);
- }).mouseout(function (){
- clearTimeout(timeoutid);
- });
- });
- });
- </script>
- </head>
- <body>
- jQuery实现常见的滑动门效果
- <hr>
- <ul>
- <li class = "tabin" >标签1</li>
- <li>标签2</li>
- <li>标签3</li>
- </ul>
- <div class = "contentin" >标签1内容文字</div>
- <div>标签2内容文字</div>
- <div>标签3内容文字</div>
- </body>
- </html>
jQuery实现的 “滑动门”(跟随鼠标滑动滑动的tab选项卡)效果
最新推荐文章于 2022-06-13 22:30:32 发布