滑动门效果制作

最新推荐文章于 2024-05-16 21:41:01 发布

weixin_33716154

最新推荐文章于 2024-05-16 21:41:01 发布

阅读量91

点赞数

文章标签： xhtml python

原文链接：https://my.oschina.net/linghun/blog/213654

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!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" />
<title>滑动门</title>
<script src="jquery-1.4.2.js"></script>
<style>
*{ margin:0; padding:00; border:0;}
ul,li{ list-style:none;}
ul{ height:35px;}
li{ float:left; width:100px; height:35px; line-height:35px; text-align:center;}
div{ border:1px solid red; width:100px; height:0; position:absolute; left:0;}
.a{ display:block;}
</style>
</head>

<body>
<ul>
   <li>滑动一</li>
   <li>滑动二</li>
    <li>滑动三</li>
    <li>滑动四</li>
</ul>
<div></div>
<script>
   $(function(){
               $("li").each(function(i){
                   $(this).click(
                       function(){
                           var d = i*100;
                           $('div').animate({'left':d+'px'},400)
                       } )
               })
   })
</script>
</body>
</html>