好资源导航 » 文章资讯 » 基于jQuery实现图片推拉门动画效果的两种方法

基于jQuery实现图片推拉门动画效果的两种方法

2023-09-25 19:23:08 244

''推拉门''动效也可以称作"手风琴"效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。

实现方法一：改变图片宽度

html+css代码

jQuery实现

jQuery精简后代码

//精简代码
$(function(){
$('li').each(function(index,element){
$(element).css('backgroud',"url('images/slidepic"+(index+2)+.jpg')");
}).mouseenter(function(){
$(this).stop().animate({width:800}).siblings().stop().aniamte(width:100});
}).mouseout(function(){
$('li').stop().animate({width:240});
});
})

实现方法二：改变图片的偏移值

html+css代码




![](images/slidepic8.jpg)
![](images/slidepic3.jpg)
![](images/slidepic4.jpg)
![](images/slidepic5.jpg)
![](images/slidepic7.jpg)

jQuery实现

注意：方法一在实现的过程中，注意宽度和图片命名的设置。

提示：这里使用的是jQuery代码实现，javaScript代码也是一样的可以实现，只是修改下遍历过程和内置函数方法，另外再重写动画函数（前面的笔记有封装好的animate函数，可以直接引入使用）。

总结

以上所述是小编给大家介绍的基于jQuery实现图片推拉门动画效果的两种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

基于jQuery实现图片推拉门动画效果的两种方法

热门推荐

随机推荐