添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
jwscrollloop 是一款非常实用的 jQuery 多图片无限循环动画特效插件。该插件可以单独对某张图片进行动画控制,如控制运动速度,方向,起点和终点等,将各种图片动画元素组合起来就可以组成非常完美的动画场景。

使用该图片动画插件需要引入 jQuery 和 jwscrollloop.js 文件。

也想出现在这里? 联系我们
  1. <script type = "text/javascript" src = "js/jquery.min.js"></script>
  2. <script type = "text/javascript" src = "js/jwscrollloop.js"></script>

HTML 结构

你可以使用一个容器<div>来包裹一张需要执行动画效果的图片。

  1. <div class="demo1">
  2.   <img id="dc1" alt="" src="images/dc1.png" />
  3. </div>

初始化插件

在页面 DOM 元素加载完毕之后,你可以通过 scrollLoop()方法来初始化该插件。

  1. $("#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 表示无限循环

多图片动画

你可以使用这个插件非常容易的制作出多图片动画效果。例如下面的例子:这个例子有两张图片,一张是白云图片,一张是飞机图片,白云会从右向左飘过,飞机则从左下角向右上角飞行。

  1. <div class="demo2">
  2.   <img id="dc1_02" alt="" src="images/dc1.png" />
  3.   <img id="dp1" alt="" src="images/dp1.png" />
  4. </div>