仿天猫鼠标移入图片滑动效果(CSS3/jQuery)

我们在访问天猫、京东以及其它网站时,鼠标放在商品广告上,商品的广告会有一个滑动效果,鼠标移开后,图片恢复原位。其实原理很简单,就是一个简单的位置变化,可以通过很多方法实现。可以通过css3实现也可以用animate()实现。
效果图:

仿天猫鼠标移入图片滑动效果(CSS3/jQuery)_第1张图片
仿天猫鼠标移入图片滑动效果.gif

方法一:使用CSS3实现
思路:利用transition属性
代码如下:



    
        
        
        
    
    
        
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)

方法二:使用animate()方法实现
实现思路:
1.鼠标移入,.stop(),防止动画叠加。然后利用效果animate改变图片位置。
2.鼠标移出,.stop(),防止动画叠加。然后利用效果animate还原图片位置。

代码(本文使用的jQuery版本是1.11.3,在低版本IE及W3C浏览器中效果相同):



    
        
        
        
        
        
    
    
        
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)
![](hd.jpg)

你可能感兴趣的:(仿天猫鼠标移入图片滑动效果(CSS3/jQuery))