加載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效果

回答

相關問題