亚洲城娱乐实现雪花效果,现在做的是天上下“心”,怎么控制“心”不重叠?急!

( 亚洲城娱乐 )

**直接上代码,输入‘我想你’我会显示弹出下“心”的效果,并且优化一下代码。
求大神帮忙看下,怎么才能把“心”不重叠?**

html结构:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background: #000;
            overflow: hidden;
        }
    </style>
</head>
<body>
<input type="text" id="txt">
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.js"></script>
<script src="snow.js"></script>
<script>
    $document.readyfunction {
        $"#txt".on"input",function{
            if$this.val=="我想你"{
                $.fn.snow{
                    newOn: 50
                };
            }
        }
    };
</script>
</body>
</html>

下面是snow.js

 function$ {
     $.fn.snow = functionoptions {
        var documentHeight = $document.height,
            documentWidth = $document.width;
             defaults = {
                 urlImg: "love.png",//img路径
                 minSize: 20,//控制最小元素
                 maxSize: 30,//控制最大元素
                 newOn: 100,//控制显示的多少
                 speed: 2000,//控制速度
                 overTime: 5000,//显示多长时间结束
                 opacity:1,// 透明度
                 xVlaue:0,  // x轴是否发生位移 0:代表不发生位移  1:代表发生位移
                 rotate:60, // 角度
                 overlay:true,//是否重叠,默认重叠为true,否则为false
                 callBack:function{}
             },
             options = $.extend{}, defaults, options;

         var snowBox=$<div class="snowBox" />.css{width:100%,height:100%,background:transparent,position:absolute,left:0,top:0,z-index:99998}.appendTobody,
             $snow = $<div class="snow" />.css{ position: absolute, top: -50px,pointer-events:none,user-select:none,z-index:99999}.html<img src="+options.urlImg+" style="width:100%;height:auto">;
       
         var interval = setIntervalfunction {
                var startPositionLeft = Math.random * documentWidth - 100,
                    startOpacity = 0.5 + Math.random,
                    sizeFlake = options.minSize + Math.random * options.maxSize,// 图片的宽度
                    endPositionTop = documentHeight,
                    endPositionLeft = startPositionLeft - 100 + Math.random * 200,
                    rotateDeg=Math.random * options.rotate + Math.random * -options.rotate;
                    
                    ifstartPositionLeft<10{
                        startPositionLeft= 30 + Math.random*10;
                    }
                    ifendPositionLeft<10{
                        endPositionLeft= 30 + Math.random*100;
                    }
                    ifoptions.xVlaue==0{
                         endPositionLeft = startPositionLeft;
                    }else{
                         endPositionLeft = startPositionLeft - 50 + Math.random * 200;
                    };
                    
             $snow.clone.appendTosnowBox.css{
                     left: startPositionLeft,
                     opacity: 0.3,
                     width: sizeFlake+"px",
                     -webkit-transform:rotate+rotateDeg+deg,
                     -moz-transform:rotate+rotateDeg+deg,
                     -ms-transform:rotate+rotateDeg+deg,
                     -o-transform:rotate+rotateDeg+deg,
                     transform:rotate+rotateDeg+deg,
                 }.animate{
                         top: endPositionTop,
                         left: endPositionLeft,
                         opacity: 1
                     },
                     options.speed,
                     linear,
                     function {
                         $this.remove
                     }
                 ;
         }, options.newOn;

         setIntervalfunction{
            clearIntervalinterval;
            snowBox.remove;
            options.callBack && options.callBack;
         },options.overTime;
     };
 }jQuery;

我也是初学者哈,这个可不可以用绝对布局把心分开,让他们不重复?

不是很明白不重复的意思?
图片不重复?那你得准备足够多的图片啊
刚才运行了下,还是想表达不重叠?

(看完/读完)这篇文章有何感想! 亚洲城娱乐的分享…

发表评论

电子邮件地址不会被公开。 必填项已用*标注