zoukankan      html  css  js  c++  java
  • 32 jQuery——自制飞粒特效

    效果先看

    知识点

    jQuery节点操作

    • append()追加节点

    js属性操作

    • setAttribute() 设置属性(覆盖型)

    jQuery动画

    • animate();//请查看api

    window对象定时与间隔执行操作

    • setInterval();//间隔执行
    • setTimeout();//定时执行
    • 具体查看api

    页面载入事件

    • $(document).ready(fn)

    获取浏览器长宽(或网页长宽)

    • // var ScreenWidth = document.body.clientWidth;网页宽
    • var ScreenWidth = window.innerWidth-10;
    • var ScreenHeight = window.innerHeight-10;

    完整代码

    需要准备好jQuery文件

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>天降粒子</title>
    		<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
    		<!-- <script src="js/texiao.js" type="text/javascript" charset="utf-8"></script> -->
    		<script type="text/javascript">
    			$(document).ready(function(){
    				window.setInterval("fly()",0);//数字为秒生产(1000/10)个div 
    			});
    			function fly(){
    				//获取屏幕(或网页)宽高
    				// var ScreenWidth = document.body.clientWidth;网页宽
    				var ScreenWidth = window.innerWidth-10;
    				var ScreenHeight = window.innerHeight-10;
    				// 生成随机id
    				var str = String.fromCharCode(Math.floor(Math.random()*26+65));
    				var num = Math.floor(Math.random()*10000);
    				var id = str + num;
    				//生成随机宽高
    				var length = Math.ceil(Math.random()*10);
    				//生成随机速度
    				var speed = Math.floor(Math.random()*17000+1000);
    				//生成随机颜色
    				var r = Math.floor(Math.random()*155);
    				var g = Math.floor(Math.random()*150);
    				var b = Math.floor(Math.random()*55);
    				var color = 'rgb('+r+','+g+','+b+')';
    				//添加div
    				$("body").append("<div id='"+id+"'></div>");
    				//初始随机位置
    				var x = -30;
    				var y = Math.floor(Math.random()*ScreenWidth);
    				var div = $("#"+id);
    				div[0].setAttribute("style",""+length+"px;height:"+length+"px;background-color: "+color+";position: absolute;left:"+y+"px;top:"+x+"px;border-radius:"+(length/2)+"px;");
    				//动画开始
    				div.animate({top:''+ScreenHeight+'px'},speed);//动画时长:移动速度
    				//动画结束删除对象
    				window.setTimeout(function(){
    				div.remove()
    				},speed)
    			}
    		</script>
    		<style>
    			body{
    				background-color: black;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="" style="color:white">
    		</div>
    	</body>
    </html>
    

      

      

  • 相关阅读:
    二叉堆(最小堆, 最大堆)介绍与实现
    C++ 用变量定义数组
    C++ 用变量定义数组
    053185
    053184
    053183
    053182
    053181
    053180
    oracle prior
  • 原文地址:https://www.cnblogs.com/Scorpicat/p/12267884.html
Copyright © 2011-2022 走看看