Question

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

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

我尝试更改一些变量，但我不是JavaScript专家，而且我无法在DIC内部工作。效果从上到下覆盖整个屏幕。

代码位于Codepen上，可在此处找到：https://codepen.io/emilykarp/pen/bVqxRm

欢迎提供帮助。

Answer 1

希望这有帮助

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

Answer 2

从我所看到的，你在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>

我的代码： https://codepen.io/anon/pen/oegwZa

Answer 3

它使用的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>')
    )};

Answer 4

这实际上对我有用。

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

在DIV元素中加载javascript效果

4 个答案: