仿天猫鼠标移入图片滑动效果（CSS3/jQuery）
2017-05-22 本文已影响312人
被时光移动的城
我们在访问天猫、京东以及其它网站时，鼠标放在商品广告上，商品的广告会有一个滑动效果，鼠标移开后，图片恢复原位。其实原理很简单，就是一个简单的位置变化，可以通过很多方法实现。可以通过css3实现也可以用animate（）实现。
效果图：
仿天猫鼠标移入图片滑动效果.gif
方法一：使用CSS3实现
思路：利用transition属性
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.hd{
width: 400px;
height: 300px;
border: 4px palegreen solid;
float: left;
margin: 10px;
position: relative;
}
.hd .hd_pic{
width: 200px;
left: 100px;
top: 90px;
position: absolute;
transition: all 1s 0.1;
}
.hd:hover .hd_pic{
left: 90px;
top: 80px;
}
</style>
</head>
<body>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
</body>
</html>
方法二：使用animate（）方法实现
实现思路：
1.鼠标移入，.stop（）,防止动画叠加。然后利用效果animate改变图片位置。
2.鼠标移出，.stop（）,防止动画叠加。然后利用效果animate还原图片位置。
代码（本文使用的jQuery版本是1.11.3，在低版本IE及W3C浏览器中效果相同）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.hd{
width: 400px;
height: 300px;
border: 4px palegreen solid;
float: left;
margin: 10px;
position: relative;
}
.hd .hd_pic{
width: 200px;
left: 100px;
top: 90px;
position: absolute;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".hd").mouseenter(function(){
$(this).find('.hd_pic').stop().animate({'left':'90px','top':'80px'},300);
});
$(".hd").mouseleave(function(){
$(this).find('.hd_pic').stop().animate({'left':'100px','top':'90px'},300)
})
})
</script>
</head>
<body>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
<div class="hd">
</div>
</body>
</html>
