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

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

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)
洪涛

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

いいねを押す+0
    迷茫

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

    いいねを押す+0
      最新のダウンロード
      詳細>
      ウェブエフェクト
      公式サイト
      サイト素材
      フロントエンドテンプレート
      私たちについて 免責事項 Sitemap
      PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!