<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script type="text/javascript"> function slide(){ $('#d1').animate({left:'-300px'},1000); $('#d2').animate({left:'0px'},1000); } </script>
<body> <div class="container" id="container"> <div class="kid" id="d1"></div> <div class="kid" id="d2"></div> </div> <button class="b1" type="button" name="button" onclick="slide()">点我</button> </body>
<style media="screen"> .container{width:300px; height: 100px; overflow: hidden; position: relative; } .b1{position: absolute; top:150px;} .kid{width: 300px; height: 100px; } #d1{position: absolute; background: blue; left: 0; top: 0;} #d2{position: absolute; background: pink; left: 300px; top: 0;} </style>
不知道怎么实现循环的水平滑动,大神们能教教我吗?
宝慕林2233867
相关分类