加载JavaScript效果

所以我发现了这个效果，我试图修改它以一个DIV myeffect内加载，例如：加载JavaScript效果

<html> 
    <head></head> 
    <body> 
     <div class="myeffect"></div> 
    </body> 
</html>

我试图改变一些变数，但我不一位JavaScript专家，我无法在DIC内部工作。效果从上到下覆盖整个屏幕。

的代码是Codepen并且可以在这里找到：https://codepen.io/emilykarp/pen/bVqxRm

帮助是值得欢迎的。

来源

2017-07-25 code_learn

希望这有助于

var speeds = []; 
 
var count = 1; 
 
var colors = ['#bf1e2e', '#ee4037', '#dc5323', '#e1861b', '#e1921e', '#f7ac40', '#f7e930', '#d1da22', '#8bc43f', '#38b349', '#008d42', '#006738', '#29b473', '#00a69c', '#26a9e1', '#1a75bb', '#2a388f', '#262161', '#652d90', '#8e2792', '#9e1f64', '#d91c5c', '#ed297b', '#d91c5c', '#db1e5e', '#bf1e2e', '#f6931e', '#f05a28', '#f6931e', '#fbaf41'] 
 
var width = parseInt($('html').css('width'), 10); 
 

 
var random = function(mult, add) { 
 
    return Math.floor((Math.random()*mult) + add); 
 
}; 
 

 
var drop = function(n, height, color) { 
 
    $('.myeffect').append('<div class="drop" style="left:'+ 
 
        n*15+'px;height:'+ 
 
        height+'vh;background-color:'+ 
 
        color+';"></div>'); 
 
}; 
 

 
var createDrops = function(space) { 
 
    for (var i=speeds.length; i < space/10; i++) { 
 
    speeds.push(random(3000, 2000)); 
 
    drop(i, random(70, 30), colors[count]); 
 
    
 
    if (count < colors.length-1) { count++; } 
 
    else { count = 0; } \t \t 
 
    } 
 
}; 
 

 
var animateDrops = function(startingN) { 
 
    for (var i=startingN; i<speeds.length; i++) { 
 
    $('.drop:nth-child('+i+')').slideDown(speeds[i]); 
 
    } 
 
}; 
 

 
createDrops(width); 
 
animateDrops(0);

.drop { 
 
    width: 16px; 
 
    height: 200px; 
 
    display: none; 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
    position: absolute; 
 
    top: 0; 
 
    -webkit-box-shadow: inset -4px -8px 16px -6px rgba(0,0,0,0.47); 
 
    -moz-box-shadow: inset -4px -8px 16px -6px rgba(0,0,0,0.47); 
 
    box-shadow: inset -4px -8px 16px -6px rgba(0,0,0,0.47); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myeffect" ></div>

来源

2017-07-25 14:40:38 codegeek

尝试给'.myEffect'一个宽度和高度。你会看到滴水仍然填满整个窗口。我非常确定OP想要滴水只在div内呈现。 – Turnip

准确@Turnip的想法是将效果加载到网页标题和导航菜单下方的div中，高度为屏幕高度的60％。网页副本应该在效果下面继续。以上是不是真的工作。它出于某种原因显示x溢出，它仍然在DIV之外。我仍在努力，希望能与你们的帮助人员一起解决。 –

它使用全部动态生成和使用该方法附加到主体的div。

var drop = function(n, height, color) { 
    $('body').append('<div class="drop" style="left:'+ 
        n*15+'px;height:'+ 
        height+'vh;background-color:'+ 
        color+';"></div>') 
    )};

因此，您只需更新脚本以追加到您的元素而不是body元素。

var drop = function(n, height, color) { 
    $('.myeffect').append('<div class="drop" style="left:'+ 
        n*15+'px;height:'+ 
        height+'vh;background-color:'+ 
        color+';"></div>') 
    )};

来源

2017-07-25 14:43:50 Korgrue

从我能看到你在你的codepen中缺少3件东西。

你应用更改为 'HTML' 而不是 '.myeffect'

在您的JS：

`var width = parseInt($('.myeffect').css('width'), 10);`

需要设置宽度与你的 '.myeffect'

在你的CSS：

.myeffect { width: 100px; }

有在codepen的 'HTML' 部分没有标记，即codepen可能默认提供的HTML标签的外部。

在你的HTML：

<html> 

    <head></head> 

    <body> 
    <div class="myeffect"></div> 
    </body> 

    </html>

我codepen： https://codepen.io/anon/pen/oegwZa

来源

2017-07-25 14:54:06 user3738936

这其实现在对我的作品。

var speeds = []; 
var count = 1; 
var colors = ['#bf1e2e', '#ee4037', '#dc5323', '#e1861b', '#e1921e', 
'#f7ac40', '#f7e930', '#d1da22', '#8bc43f', '#38b349', '#008d42', '#006738', 
'#29b473', '#00a69c', '#26a9e1', '#1a75bb', '#2a388f', '#262161', '#652d90', 
'#8e2792', '#9e1f64', '#d91c5c', '#ed297b', '#d91c5c', '#db1e5e', '#bf1e2e', 
'#f6931e', '#f05a28', '#f6931e', '#fbaf41'] 
var width = parseInt($('.myeffect').css('width'), 10); 

var random = function(mult, add) { 
return Math.floor((Math.random()*mult) + add); 
}; 

var drop = function(n, height, color) { 
$('.myeffect').append('<div class="drop" style="left:'+ 
       n*60+'px;height:'+ 
       height+'vh;background-color:'+ 
       color+';"></div>'); 
}; 
var createDrops = function(space) { 
for (var i=speeds.length; i < space/60 + 2; i++) { 
speeds.push(random(3000, 2000)); 
drop(i, random(35, 20), colors[count]); 

if (count < colors.length-1) { count++; } 
else { count = 0; }  
} 
}; 

var animateDrops = function(startingN) { 
for (var i=startingN; i<speeds.length; i++) { 
    $('.drop:nth-child('+i+')').slideDown(speeds[i]); 
} 
}; 

createDrops(width); 
animateDrops(0);

来源

2017-07-25 18:41:47

加载JavaScript效果

回答

相关问题