最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery蓝天白云飘动效果

来源:http://www.erdangjiade.com/ 沐浴春风 2015-06-09 19:20浏览(1520)

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

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

jQuery蓝天白云飘动效果
分类:其它特效 > jQuery插件 难易:中级
查看演示

加我微信,拉你进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);
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/168.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    02-13 17:07
    ngu137
    不错的特效。。。漂亮啊啊 。。。
1 2