这是我尝试雪花的代码.一切似乎都没问题但是一旦脚本无响应意味着一段时间(它会慢慢浏览器firefox).
我不确定为什么会这样.
如何在没有任何浏览器的情况下使其成为响应.
这是FIDDLE
我怎样才能使它成为响应式脚本而不会引起任何问题.
我想我在循环javascript函数时犯了一个错误:(
任何建议都会很棒.
谢谢
使用Javascript:
// window.setInterval(generateSnow, 0);
var windowHeight = jQuery(document).height();
var windowWidth = jQuery(window).width();
function generateSnow() {
for (i = 0; i < 4; i++) {
var snowTop = Math.floor(Math.random() * (windowHeight));
snowTop = 0;
var snowLeft = Math.floor(Math.random() * (windowWidth - 2));
var imageSize = Math.floor(Math.random() * 20);
jQuery('body').append(
jQuery('<div />')
.addClass('snow')
.css('top', snowTop)
.css('left', snowLeft)
.css('position', 'absolute')
.html('*')
);
}
}
function snowFalling() {
jQuery('.snow').each(function(key, value) {
if (parseInt(jQuery(this).css('top')) > windowHeight - 80) {
jQuery(this).remove();
}
var fallingSpeed = Math.floor(Math.random() * 5 + 1);
var movingDirection = Math.floor(Math.random() * 2);
var currentTop = parseInt(jQuery(this).css('top'));
var currentLeft = parseInt(jQuery(this).css('left'));
jQuery(this).css('top', currentTop + fallingSpeed);
if (movingDirection === 0) {
jQuery(this).css('bottom', currentLeft + fallingSpeed);
} else {
jQuery(this).css('bottom', currentLeft + -(fallingSpeed));
}
});
}
window.setInterval(snowFalling, 15);
window.setInterval(generateSnow, 1000);
解决方法:
您正在运行时在页面上添加和删除大量元素,这使得浏览器经常刷新该页面的结构.
那种方法是:
>你可以做的最糟糕的表现
>一旦生成,删除,生成,删除,生成,删除了足够的DIV,可能会使浏览器瘫痪……
使用此配置,移动浏览器可能会在2秒后冻结.
我建议在开始时预先生成所有DIV,重新使用它们并使用CSS动画或jQuery animate()来完成你想要做的事情.