javascript - 实现雪花效果,现在做的是天上下“心”,怎么控制“心”不重叠?急!
阿神
阿神 2017-04-11 10:15:05
[JavaScript讨论组]

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

html结构:




    
    Document
    







下面是snow.js

 (function($) {
     $.fn.snow = function(options) {
        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=$('

').css({'width':'100%','height':'100%','background':'transparent','position':'absolute','left':0,'top':0,'z-index':99998}).appendTo('body'), $snow = $('

').css({ 'position': 'absolute', 'top': '-50px','pointer-events':'none','user-select':'none','z-index':99999}).html(''); var interval = setInterval(function() { 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); if(startPositionLeft<10){ startPositionLeft= 30 + Math.random()*10; } if(endPositionLeft<10){ endPositionLeft= 30 + Math.random()*100; } if(options.xVlaue==0){ endPositionLeft = startPositionLeft; }else{ endPositionLeft = startPositionLeft - 50 + Math.random() * 200; }; $snow.clone().appendTo(snowBox).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); setInterval(function(){ clearInterval(interval); snowBox.remove(); options.callBack && options.callBack(); },options.overTime); }; })(jQuery);

阿神
阿神

闭关修行中......

全部回复(2)
PHP中文网

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

迷茫

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号