jQuery如何实现图片推拉门动画效果
这篇文章主要介绍了jQuery如何实现图片推拉门动画效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联是一家成都网站设计、网站建设,提供网页设计,网站设计,网站制作,建网站,定制网站,网站开发公司,成立于2013年是互联行业建设者,服务者。以提升客户品牌价值为核心业务,全程参与项目的网站策划设计制作,前端开发,后台程序制作以及后期项目运营并提出专业建议和思路。
实现方法一:改变图片宽度
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代码也是一样的可以实现,只是修改下遍历过程和内置函数方法,另外再重写动画函数。
感谢你能够认真阅读完这篇文章,希望小编分享的“jQuery如何实现图片推拉门动画效果”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
网站题目:jQuery如何实现图片推拉门动画效果
网站地址:http://azwzsj.com/article/jhejse.html