CloudsJS是一款非常简单的云彩飘动效果jQuery插件。通过该插件你可以制作出多层云彩水平飘动的效果,它使用简单,可以为你的网站添加一些观赏性。
使用方法
使用该白云飘动效果需要引入jQuery和clouds.js以及clouds.css文件。
<link rel="stylesheet" href="css/clouds.css" /> <script src="js/jquery.min.js"></script> <script src="js/clouds.js"></script>
HTML结构
云彩层分为2个图层,一个是近视图层,一个远视图层。它们分别使用不同的云彩作为背景图片。
<div id="far-clouds" class="stage far-clouds"></div> <div id="near-clouds" class="stage near-clouds"></div>
页面的主要内容放置在div.content
容器中。
<div class="content"> <!-- 页面内容 --> </div>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该云彩飘动插件。
$(document).ready(function () { $("#far-clouds").clouds({ fps: 30, speed: 0.7, dir: "left" }); $("#near-clouds").clouds({ fps: 30, speed: 1, dir: "left" }); });
配置参数
-
fps
:执行动画的频率。插件会用1000除以这个数值来作为定时完成animate
动画的时间。 -
speed
:云彩飘动的速度。 -
dir
:云彩飘动的风方向。
CloudsJS插件的github地址为:https://github.com/csyntax/CloudsJS
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!