渡一雪花效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    
    
            margin:0px;
            padding:0px;
            /* 背景图 */
            background-color:lightskyblue
        }
        
    </style>
</head>
<body> 
    <script>

        //创建多个雪花
        setInterval(function(){
    
    
            //一个雪花
            var oImg = document.createElement("img");
            

            //一个雪花宽度,高度不确定，随机数，宽高相等好看
            var oImgNum = Math.random()*70 + 10

            //一个雪花透明度不确定
            var oImgOpacity = Math.random()*0.5 + 0.5

            //一个雪花出生水平位置不确定
            var oImgLeft = Math.random()*document.documentElement.clientWidth

            //多方向下落，水平每次移动距离，随机数
            var iSpeedX = Math.random()*40-20;

            //多方向下落，垂直每次移动距离，随机数
            var iSpeedY = 1;

            //模拟重力场
            var g = 1;

            //一个雪花样式

            //1.随机样式
            oImg.style.width = oImgNum + "px";
            oImg.style.height = oImgNum + "px";
            oImg.style.opacity = oImgOpacity;
            oImg.style.left = oImgLeft + "px";

            //2.固定样式
            oImg.src = "雪花.jpg";
            oImg.style.position = "absolute";
            oImg.style.top = "0px"

            //一个雪花插入页面
            document.body.appendChild(oImg);


            //一个雪花的定时器，下落功能
            oImg.timer = setInterval(function(){
    
    
                iSpeedY += g;
                //下一30毫秒多方向下落
                newTop = oImg.offsetTop + iSpeedY;
                newLeft = oImg.offsetLeft + iSpeedX;
                
                //下一30毫秒超出可视区底部,反弹,能量损失
                if(newTop >= document.documentElement.clientHeight - oImg.clientHeight){
    
    
                    iSpeedY *= -1
                    newTop = document.documentElement.clientHeight - oImg.clientHeight
                    iSpeedX *= 0.8;
                    iSpeedY *= 0.8;
                }
                //下一30毫秒超出可视区右,删除雪花,一个雪花的定时器清除
                if(newLeft >= document.documentElement.clientWidth - oImg.clientWidth){
    
    
                    newLeft = document.documentElement.clientWidth - oImg.clientWidth
                    clearInterval(oImg.timer);
                    oImg.remove();
                }
                //下一30毫秒超出可视区左,删除雪花,一个雪花的定时器清除
                if(newLeft <= 0){
    
    
                    newLeft = 0;
                    clearInterval(oImg.timer);
                    oImg.remove();
                }
                //下一30毫秒超出可视区顶部,删除雪花,一个雪花的定时器清除
                if(newTop <= 0){
    
    
                    newTop = 0;
                    clearInterval(oImg.timer);
                    oImg.remove();
                }
                
                oImg.style.top = newTop + "px";
                oImg.style.left = newLeft + "px";
               
                
                
                
            },30)
            
        },350)
        
    </script>
</body>
</html>
猜你喜欢
