浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery页面滚动 2017-03-08

人气6080

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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。可用值有:relativeabsolute。两种方式在图片动画开始和结束的地方会有一些差异。
  • 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});
});
              

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:143.62KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1775.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery多重图片无限循环动画特效

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)