javascript下雨

r囧r小猫 2022-01-28 00:39 204阅读 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 条评论，204人围观）

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

相关阅读

相关 Java代码雨。黑客帝国（电影）同款代码雨。

package cn.tedu.day03; import java.awt.; import java.awt.event.ActionEvent

待我称王封你为后i/ 2023年07月22日 09:12/ 0 赞/ 16 阅读

相关【JS】代码雨特效

html代码 <canvas id="code_rain_canvas" width="1440" height="900"></canvas> js 代码

一时失言乱红尘/ 2023年03月04日 09:15/ 0 赞/ 31 阅读

相关炎炎夏日，快用代码下场雨

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群 ![dbd97cb4070d7fdabf8ffa5924601bfa.png][] 来

雨点打透心脏的1/2处/ 2023年01月21日 11:29/ 0 赞/ 12 阅读

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

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

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

相关 239.纯 CSS 雨

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

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

相关字符雨效果实现

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

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

相关 JavaScript 字符雨

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

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

相关小程序红包雨

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

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

相关 javascript下雨

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

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

相关我爱雨

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

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