代码描述:jQuery滑动门。jQuery滑动门代码下载
滑动门效果在大量的网页中都有应用,可能表现形式不一样,但是原理都是大同小异,下面是一段简单滑动门代码实例,通过此实例我们详细介绍一下它的实现过程,希望对需要的朋友带来帮助。 实例代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>jQuery实现的滑动门实例代码-51前端</title> <style type="text/css"> *{ margin:0; padding:0; font-size:12px; } ul li{ list-style:none; float:left; background-color:#999; cursor:pointer; width:100px; height:25px; line-height:25px; text-align:center; } ul li.bg{ background-color:#9F0; } .div{ width:200px; height:60px; background:#666; line-height:60px; text-align:center; } .none{ display:none } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $("ul li").each(function(i){ $(this).hover(function(){ $(this).addClass("bg").siblings().removeClass("bg"); $(".div:eq("+i+")").show().siblings(".div").hide(); }) }) }) </script> </head> <body> <ul style="overflow:hidden"> <li class="bg">标题一</li> <li>标题二</li> </ul> <div class="div">51前端一</div> <div class="div none">51前端二</div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能