jQuery实现的 “滑动门”（跟随鼠标滑动滑动的tab选项卡）效果

技术2022-05-19 20

<!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>

专利

最新回复(0)