jwscrollloop是一款非常实用的jQuery多图片无限循环动画特效插件。该插件可以单独对某张图片进行动画控制,如控制运动速度,方向,起点和终点等,将各种图片动画元素组合起来就可以组成非常完美的动画场景。
使用方法
使用该图片动画插件需要引入jQuery和jwscrollloop.js文件。
<script type = "text/javascript" src = "js/jquery.min.js"></script> <script type = "text/javascript" src = "js/jwscrollloop.js"></script>
HTML结构
你可以使用一个容器<div>
来包裹一张需要执行动画效果的图片。
<div class="demo1"> <img id="dc1" alt="" src="images/dc1.png" /> </div>
初始化插件
在页面DOM元素加载完毕之后,你可以通过scrollLoop()
方法来初始化该插件。
$("#dc1").scrollLoop();
配置参数
下面是该图片循环动画插件的一些可用配置参数。
-
time
:完成一次动画的时间,单位毫秒,默认值为5000。 -
offsetX
:图片X方向的开始位置,单位像素,默认值1000。例如1000表示距离原始位置向右1000像素。 -
deltaX
:图片X方向的结束位置,单位像素,默认值-1000。正值向右运动,负值向左运动。 -
offsetY
:图片Y方向的开始位置,单位像素,默认值0。 -
deltaY
:图片Y方向的结束位置,单位像素,默认值0。正值向上运动,负值向下运动。 -
position_type
:对象的单位方式,默认值relative
。可用值有:relative
和absolute
。两种方式在图片动画开始和结束的地方会有一些差异。 -
play_count
:执行动画的次数,默认值-1
。-1表示无限循环。
多图片动画
你可以使用这个插件非常容易的制作出多图片动画效果。例如下面的例子:这个例子有两张图片,一张是白云图片,一张是飞机图片,白云会从右向左飘过,飞机则从左下角向右上角飞行。
<div class="demo2"> <img id="dc1_02" alt="" src="images/dc1.png" /> <img id="dp1" alt="" src="images/dp1.png" /> </div>
$(function(){ $("#dc1_02").scrollLoop({'time':10000}); $("#dp1").scrollLoop({'time':10000,'offsetX':-600,'deltaX':800,'offsetY':200,'deltaY':-300}); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!