jquery实现云朵飘动

最新推荐文章于 2024-04-23 11:28:13 发布

编程之上

最新推荐文章于 2024-04-23 11:28:13 发布

阅读量2.7k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/ruizhengyun/article/details/37504303

版权

jquery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

每天一个小动画。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery实现云朵随机飘动的效果</title>
	<style>
	*{margin:0;padding:0;}
	body, html{width:100%;height:100%;}
	body{background:url("https://img-blog.csdn.net/20140707115026203?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVpemhlbmd5dW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast") repeat-x;}
	#mainBody{position:relative;width:100%;height:100%;}
	.cloud{position:absolute;top:0px;left:0px;width:100%;height:100%;background:url("https://img-blog.csdn.net/20140707115120968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVpemhlbmd5dW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast") no-repeat;z-index:1;opacity:0.8;}
	#cloud2{z-index:3;}
	#weather{background:url("https://img-blog.csdn.net/20140707115151984?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVpemhlbmd5dW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast") no-repeat;border-radius:90px;width:150px;height:150px;position:absolute;left:440px;top:30px;z-index:2;}
	#weather img{margin:30px -90px;}
	</style>
</head>
<body>
	<div id="mainBody">
	    <div id="cloud1" class="cloud"></div>
	    <div id="cloud2" class="cloud"></div>
	</div>

	<div id="weather">
		<img src="https://img-blog.csdn.net/20140707115120968?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcnVpemhlbmd5dW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" width="300"/>
	</div>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	// Cloud Float...
		$(function(){
			var timer = null;
			var offset1 = 450;	//动画一的初始位置
			var offset2 = 0;	//动画二的初始位置

			var $body = $('body');
			var $main = $('#mainBody');
			var $mainW = $main.outerWidth();
			var $cloud1 = $('#cloud1');
			var $cloud2 = $('#cloud2');

			$body.hover(function(){
				// 判断是否有定时器
				if(timer){
					clearInterval(timer);
				}
			},function(){
				timer = setInterval(function(){
					// 极界判断
					if(offset1 >= $mainW){
						offset1 = -580;
					}
					if(offset2 >= $mainW){
						offset2 = -580;
					}

					// 物体加速度
					offset1 += 1.1;
					offset2 += 1;
					// 位置重定位
					$cloud1.css({"background-position": offset1 + 'px 60px'});
					$cloud2.css({"background-position": offset2 + 'px 340px'});
				},70);
			}).trigger('mouseleave');
		});
	</script>
</body>
</html>