图片/图形
jwtextureswim 背景图片动画jQuery插件
PetitQ
jwtextureswim 是一款可以制作背景图片动画特效的 jQuery 插件。通过该插件你可以在任何容器的水平和垂直方向上制作背景图片的动画。非常适合用于制作 Banner 和一些特定区域的动画效果。
使用方法
首先需要引入 jQuery 和 jwtextureswim-1.0.js 文件。
也想出现在这里？联系我们吧
<script src="jquery-1.11.0.min.js"></script>
<script src="jwtextureswim-1.0.js"></script>
HTML 结构
你可以在任何容器中添加背景图片动画特效。
<div class="checker">jwQuakeText</div>
CSS 样式
你可以为你的容器自定义背景图片，例如为上面的容器添加了一个国际象棋棋盘的背景图片。
.checker{background: url('../images/checker_bg.png') white;
font-size: 2.0em;
text-align: center;
padding: 50px 0px;
color: #222;
}
添加后得到的结果如下所示：
初始化插件
在页面 DOM 元素加载完毕之后，可以通过 textureSwim()方法来初始化该插件。
$(".checker").textureSwim();
配置参数
下面有一些配置参数可以调整背景图片的动画效果。
distanceX：类型：int。在一个循环中水平方向上纹理的运动距离，单位像素。默认值 500，传入一个负数会向左运动
distanceY：类型：int。在一个循环中垂直方向上纹理的运动距离，单位像素。默认值 0，传入一个负数会向上运动
duration：类型：int。单位毫秒。纹理移动一个循环的时间。默认值 5000
delay ：类型：int。单位毫秒。每次动画结束后的延迟时间
ease：类型：string。动画的 easing 函数。默认值为 Linear
repeat：类型：int。重复动画的次数。默认值：-1，表示无限循环
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
