JQuery实现简单的图片滑动切换特效

2020-05-29 07:07:35易采站长站整理

<script type="text/javascript">
$(document).ready(function(){
$('.box .box1').mouseover(function(){
$(this).stop().animate({"top":"-514px"}, 200);
})
$('.box .box1').mouseout(function(){
$(this).stop().animate({"top":"0"}, 200);
})
})
</script>

</head>
<body>

<div id="in_ct">
<!----------in_ct开始---------->
<div class="in_ct">
<!----------in_ct1 开始---------->
<div class="in_ct1">
<ul class="box">
<li>
<div class="box1">
<div class="toll_img"><img src="images/in_img1.jpg" width="272" height="514"/></div>
<div class="toll_info"><a href="" target="_blank"><img src="images/in_img1_ho.jpg" height="514" width="272" /></a></div>
</div>
</li>
<li>
<div class="box1">
<div class="toll_img"><img src="images/in_img2.jpg" width="272" height="514"/></div>
<div class="toll_info"><a href="" target="_blank"><img src="images/in_img2_ho.jpg" height="514" width="272" /></a></div>
</div>
</li>
<li>
<div class="box1">
<div class="toll_img"><img src="images/in_img3.jpg" width="272" height="514"/></div>
<div class="toll_info"><a href="" target="_blank"><img src="images/in_img3_ho.jpg" height="514" width="272" /></a></div>
</div>
</li>
<li>
<div class="box1">
<div class="toll_img"><img src="images/in_img4.jpg" width="272" height="514"/></div>
<div class="toll_info"><a href="" target="_blank"><img src="images/in_img4_ho.jpg" height="514" width="272" /></a></div>
</div>
</li>
</ul>
</div>
<!----------in_ct1 结束---------->
</div>
<!----------in_ct结束---------->
</div>
</body>
</html>

上演示图