当前位置：首页 > 网页特效 > 图片特效

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

分类：图片特效日期：2024-05-14 点击(0) 评论(0)

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

简介

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

```html
<script type = "text/javascript" src = "js/jquery.min.js"></script>
<script type = "text/javascript" src = "js/jwscrollloop.js"></script>   
```             
#####  HTML结构
你可以使用一个容器div来包裹一张需要执行动画效果的图片。

```html
<div class="demo1">
  <img id="dc1" alt="" src="images/dc1.png" />
</div>     
```
#####  初始化插件
在页面DOM元素加载完毕之后，你可以通过scrollLoop()方法来初始化该插件。

```html
$("#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表示无限循环。
#####  多图片动画
你可以使用这个插件非常容易的制作出多图片动画效果。例如下面的例子：这个例子有两张图片，一张是白云图片，一张是飞机图片，白云会从右向左飘过，飞机则从左下角向右上角飞行。

```html
<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});
});```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果