我有这个代码用于下降的花瓣效果。原始代码不是我的,我对编码除了如何改变像图像之类的一些东西之外一无所知(就像我对这个版本的代码所做的那样),但是我想知道它是否有可能让它看起来像是仅在页面的左侧。
我对这种事情一无所知,我一直在寻找答案,但我甚至不确定如何提出这个问题,所以我最大的希望是有人会了解我在寻找什么并能够回答。我已经玩了一点,但除了弄清楚如何改变坠落速度之外,我不知道我是否能够做到这一点只是摆弄。我有点害怕它需要完全重写但是现在,任何帮助都会受到赞赏。 (原始代码仍然记入贷方并链接回原始教程博客上的原始代码,我删除了它,因为它与此问题无关,但如果需要可以提供它,无论出于何种原因)。
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png";image_urls['rain2']="https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png";image_urls['rain3']="https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png";image_urls['rain4']="https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
答案 0 :(得分:1)
首先,您应该检查代码的作者是否可以修改和重用他的代码。他甚至可能会为您解决问题。
在left: e(0,c) + 'px'
来电中将left: e(0, c/2) + 'px'
更改为setTimeout()
e
是一个random(startRange, endRange)
函数,c
是窗口的长度,所以通过将可能出现雨滴的窗口左侧的可能位置减半,我们有效地将它们限制在左侧屏幕的一半。
这是fiddle illustrating the change。
请注意,我并不打算理解整个脚本,并且还有两个对c
的其他引用可能需要检查(可能是旧浏览器的兼容性?):
rainDiv
的尺寸为c - 20
px。这可能在最近的浏览器中,甚至在所有e(0, c)
。答案 1 :(得分:-1)
使用美化的代码示例:
<script>
if (typeof jQuery == 'undefined') {
document.write('<' + 'script');
document.write(' language="javascript"');
document.write(' type="text/javascript"');
document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');
document.write('</' + 'script' + '>')
}
</script>
<script>
if (!image_urls) {
var image_urls = Array()
}
if (!flash_urls) {
var flash_urls = Array()
}
image_urls['rain1'] = "https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png";
image_urls['rain2'] = "https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png";
image_urls['rain3'] = "https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png";
image_urls['rain4'] = "https://2.bp.blogspot.com/-LVX2LSAy4zM/VuyuSSQGKoI/AAAAAAAAAHk/0xFc8xRWzh8rUrbWaxkLaXFiSM6D46fiA/s1600/imageedit_2_9597694661.png";
$(document).ready(function() {
var c = $(window).width();
var d = $(window).height();
var e = function(a, b) {
return Math.round(a + (Math.random() * (b - a)))
};
var f = function(a) {
setTimeout(function() {
a.css({
left: e(0, c) + 'px',
top: '-30px',
display: 'block',
opacity: '0.' + e(10, 100)
}).animate({
top: (d - 10) + 'px'
}, e(7500, 8000), function() {
$(this).fadeOut('slow', function() {
f(a)
})
})
}, e(1, 8000))
};
$('<div></div>').attr('id', 'rainDiv')
.css({
position: 'fixed',
width: (c - 20) + 'px',
height: '1px',
left: '0px',
top: '-5px',
display: 'block'
}).appendTo('body');
for (var i = 1; i <= 20; i++) {
var g = $('<img/>').attr('src', image_urls['rain' + e(1, 4)])
.css({
position: 'absolute',
left: e(0, c) + 'px',
top: '-30px',
display: 'block',
opacity: '0.' + e(10, 100),
'margin-left': 0
}).addClass('rainDrop').appendTo('#rainDiv');
f(g);
g = null
};
var h = 0;
var j = 0;
$(window).resize(function() {
c = $(window).width();
d = $(window).height()
})
});
</script>