jQuery蓝天白云飘动效果

收藏

看到许多会员在网站上搜索了“飘”，估计是要的白云飘动效果吧，若是需要其他飘动效果，请联系群众阿豆。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们在页面上放置两种背景飘动的云.cloud，和浮在太阳上的云朵#weather。

<div id="mainBody">
   <div id="cloud1" class="cloud"></div>
    <div id="cloud2" class="cloud"></div>
</div>

<div id="weather">
  <img src="images/cloud.png" width="300"/>
</div>

接着我们对背景云朵定时动画。

setInterval(function flutter() {
	if (offset1 >= mainwidth) {
		offset1 =  -580;
	}

	if (offset2 >= mainwidth) {
		 offset2 =  -580;
	}
	offset1 += 1.1;
	offset2 += 1;
	$cloud1.css("background-position", offset1 + "px 30px")
	
	$cloud2.css("background-position", offset2 + "px 340px")
}, 70);