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