人靠衣装,机靠壳装

jQuery多重图片无限循环动画场景特效

2015-08-01 15:28 发布

00
admin
湖南省 长沙市
  • 粉丝3

  • 关注0

  • 动态2

niuqiqi011104.jpg


jwscrollloop是一款非常实用的jQuery多图片无限循环动画特效插件。该插件可以单独对某张图片进行动画控制,如控制运动速度,方向,起点和终点等,将各种图片动画元素组合起来就可以组成非常完美的动画场景。


配置参数

下面是该图片循环动画插件的一些可用配置参数。

  • time:完成一次动画的时间,单位毫秒,默认值为5000。

  • offsetX:图片X方向的开始位置,单位像素,默认值1000。例如1000表示距离原始位置向右1000像素。

  • deltaX:图片X方向的结束位置,单位像素,默认值-1000。正值向右运动,负值向左运动。

  • offsetY:图片Y方向的开始位置,单位像素,默认值0。

  • deltaY:图片Y方向的结束位置,单位像素,默认值0。正值向上运动,负值向下运动。

  • position_type:对象的单位方式,默认值relative。可用值有:relativeabsolute。两种方式在图片动画开始和结束的地方会有一些差异。

  • play_count:执行动画的次数,默认值-1。-1表示无限循环。

 多图片动画

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

<div class="demo2">
  <img id="dc1_02" alt=""  id="finecms_img_1498" src=""images/dc1.png" />
  <img id="dp1" alt="" src="images/dp1.png?s=finecms"" />
</div>




$(function(){
  $("#dc1_02").scrollLoop({'time':10000});
  $("#dp1").scrollLoop({'time':10000,'offsetX':-600,'deltaX':800,'offsetY':200,'deltaY':-300});
});


授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

猜你喜欢
更多发现
子导航JS代码