php怎么让页面下雪花,javascript,html_实现雪花效果，现在做的是天上下“心”，怎么控制“心”不重叠？急！，javascript,html,html5 - phpStudy...

实现雪花效果，现在做的是天上下“心”，怎么控制“心”不重叠？急！

**直接上代码，输入‘我想你’我会显示弹出下“心”的效果，并且优化一下代码。

求大神帮忙看下，怎么才能把“心”不重叠？**

html结构：

Document

body{

background: #000;

overflow: hidden;

}

$(document).ready(function() {

$("#txt").on("input",function(){

if($(this).val()=="我想你"){

$.fn.snow({

newOn: 50

});

}

})

});

下面是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=$('

$snow = $('

');

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);

相关阅读:

django-socketio问题

新版chrome不能访问摄像头

MyEclipse看不到工程了

如何在获得返回值之后还需要进行其他操作的函数中不使用类似return的返回方式？

360浏览器为什么默认以兼容模式打开网页？

两个size大小大于300w个的List>进行配对运算，及排序.这样速度是不是很慢

如何通过 css 让背景左后居中上面置顶

推荐 Mean.js 0.4 的教程

用gulp编译jade报错无法读取变量

flask 进程间通信

在五个元素节点中。如何向左向右移动元素节点的位置？

如何更好的理解form_for的源码？

在python中自己写的数据类型使用print无法输出每个元素

新手如何开始sencha touch

已解决nginx:80 转发 tomcat 不成功

如何在指定时间强制刷新页面？

求一个数据库查询排序算法

通过接口，ios端接收到的json是16进制的，并不是字符串呀？Android端跟网页测试都正常

today widget NSTimer memory read error?

有没有什么方法能让 cmd.fm 正常播放音乐