**直接上代码,输入‘我想你’我会显示弹出下“心”的效果,并且优化一下代码。
求大神帮忙看下,怎么才能把“心”不重叠?**
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);
我也是初学者哈,这个可不可以用绝对布局把心分开,让他们不重复?
不是很明白不重复的意思?
图片不重复?那你得准备足够多的图片啊
刚才运行了下,还是想表达不重叠?