jquery实现云朵飘动

本文主要是介绍jquery实现云朵飘动，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

每天一个小动画。

<!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>

这篇关于jquery实现云朵飘动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！