jQuery蓝天白云飘动效果

来源:https://www.sucaihuo.com/js/168.html 2015-06-09 19:20浏览(1660) 收藏

看到许多会员在网站上搜索了“飘”,估计是要的白云飘动效果吧,若是需要其他飘动效果,请联系群众阿豆。
jQuery蓝天白云飘动效果
分类:其它特效 > jQuery插件 难易:中级
查看演示 下载资源 下载积分: 20 积分

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);
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2