javascript下雨

r囧r小猫 2022-01-28 00:39 159阅读 0赞

## 掉落的盒子 ##

*{
    			margin: 0;
    			padding: 0;
    			text-align: center;
    			}
    		li{
    			margin-top: 0px;
    			list-style: none;
    			display: block;
    			float: left;
    			width: 50px;
    			height: 50px;
    			margin-left: 10px;
    			background-color: blue;
    				/*transition: all .5s;*/
    			position: relative;
    			}
    		ul{
    			height: 768px;
    			width: 100%;
    			margin: 0 auto;
    				
    			}
    		#bigbox {
    			position: fixed;
    			width: 100%;
    			height: 100%;
    			background-color: rgba(0,0,0,0);
    			z-index: 0;
    	
    		}
    		#box{
    			width: 100%;
    			height: 100%;
    			position: absolute;
    			z-index: 999;
    		}

<div id="bigbox">
    			
    		</div>
    		<div id="box">
    			<ul class="box"></ul>
    		</div>

<script src="index.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    		var box=document.getElementsByClassName("box")[0];
    		var li=document.getElementsByTagName("li");
    		var bigbox=document.getElementById("bigbox");
    		var time;
    		for(i=0;i<20;i++){
    			box.innerHTML+="<li></li>";
    		}
    		var index=true;
    		box.onclick=function(){
    			var n=0;
    			if(index){
    				var time=setInterval(function(){
    					stobj(li[n],'top',20,500)
    					bigbox.style.zIndex=9999;
    					if(n>=19){
    						clearInterval(time);
    						bigbox.style.zIndex=0;
    					}
    					n++;
    				},160)
    				index=false;
    			}else{
    				var time=setInterval(function(){
    					stobj(li[n],'top',20,0)
    					bigbox.style.zIndex=9999;
    					if(n>=19){
    						clearInterval(time);
    						bigbox.style.zIndex=0;
    					}
    					n++;
    				},160)
    				index=true;
    			}
    			
    		}
    		
    		</script>

引入的js代码

function leftSty(obj,attr){
    			if(obj.currentStyle){
    				return obj.currentStyle[attr];
    			}else{
    				return getComputedStyle(obj)[attr]
    			}
    		}
    		function stobj (obj,attr,step,target) {
    			var left=parseInt(leftSty(obj,attr));
    			step=left>=target?-step:step;
    			var time3=setInterval(function(){
    				left=left+step;
    				//一个判断正数    第二个判断负数
    				if((left >= target && step > 0)||(left <= target && step <0)){
    					left=target;
    					clearInterval(time3);
    				}
    				obj.style[attr]=left+'px';//(li[0],'marginTop',11,500)
    			},50)
    		}

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220128/6f6727595fa4485fa40a156b7e60a2ff.png

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关炎炎夏日，快用代码下场雨ヽ｀☂ヽ｀canvas

一.先看效果（源码在最后）：哗啦啦啦 [我的B站地址~效果演示更清晰][B] 图片展示，因为图片限制5m大小，所以演示不太多： ![在这里插入图片描述][

梦里梦外;/ 2022年10月21日 03:42/ 0 赞/ 51 阅读

相关雨中走路淋雨多还是跑步淋雨多？

雨中走路淋雨多还是跑步淋雨多？前言 1. 物理模型 2. 基本分析 3. 如何淋雨少？ 4. 还能再给力一点吗？前言每次下雨我

雨点打透心脏的1/2处/ 2022年09月17日 03:17/ 0 赞/ 200 阅读

相关 239.纯 CSS 雨

效果 (源码网盘地址在最后) ![099a7f296ac6351236f6a418ef204aec.gif][] 源码 index.html <!DOC

小鱼儿/ 2022年09月12日 11:57/ 0 赞/ 113 阅读

相关字符雨效果实现

题目模仿黑客帝国的字符雨特效，要求字符串中的字符随机，长度随机，位置随机。效果图： ![字符雨][1344001759_5680.gif] 样

男娘i/ 2022年08月10日 03:34/ 0 赞/ 200 阅读

相关 JavaScript 字符雨

<html> <head> <meta charset="utf8"/> <title>字符雨</tit

Bertha 。/ 2022年07月13日 13:56/ 0 赞/ 110 阅读

相关 c语言实现数字雨

控制生成的数字为0和1两个数 st\[i\].ch = rand()%(49-47)+48; gotoxy函数确定ch在屏幕中出现的位置，set\_color函数

素颜马尾好姑娘i/ 2022年07月12日 12:49/ 0 赞/ 158 阅读

相关小程序红包雨

前言话不多少先上效果,引入很简单，将/components/s-packetrain/index放到你的组件文件夹中直接引用就可以了。 ![图片描述][3214

女爷i/ 2022年03月07日 04:28/ 0 赞/ 202 阅读

相关 CMD命令实现数字雨

使用cmd命令可以实现类似黑客帝国中的数字雨，这里给出脚本和演示效果： digitalrain.bat @echo off title digitalrai

素颜马尾好姑娘i/ 2022年02月15日 15:38/ 0 赞/ 300 阅读

相关 javascript下雨

掉落的盒子 { margin: 0; padding: 0; text-align: center; }

r囧r小猫/ 2022年01月28日 00:39/ 0 赞/ 160 阅读

相关我爱雨

昨夜西风今夜雨，园内黄花已离去。林叶拍打更精神，初见色比春夏绿。 2012年10月26日天凉了，小雨微微，不知有谁在惦记着我呢？秋过了，枫

向右看齐/ 2021年06月24日 16:11/ 0 赞/ 335 阅读