图片/图形
jwscrollloop 图片无限循环动画jQuery特效
PetitQ
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});
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
