切換功能，gradientifies背景顏色

基本上我試圖切換功能，逐漸改變div的背景顏色。有一個單獨的script.js文件負責函數gradientify（）的運行。切換功能，gradientifies背景顏色

我只是不知道什麼是切換功能的邏輯...

的index.html

<body> 
    <button type="button" id="btn"></button> 
    <div style="width: 100px; height: 100px;"></div> 
</body>

的script.js

$('#btn').click(function() { 
    $('div').toggle(function() { 
     $(this).gradientify({ 
     gradients: [ 
      { start: [49,76,172], stop: [242,159,191] }, 
      { start: [255,103,69], stop: [240,154,241] }, 
      { start: [33,229,241], stop: [235,236,117] } 
     ] 
    }); 
    }); 
});

來源

2016-12-02 Philip Savenok

你也許可以做到 <按鈕的onclick = 「gradientify（）」>點擊我 – marcan2020

如果我理解正確的是並沒有爲我工作... –

，'$ ＃toggle' [不接受函數作爲第一個參數]（http://api.jquery.com/toggle/）。一般來說，關於Javascript說「切換函數」是不正確的。最後，如果沒有'$＃gradientify'的代碼，就不可能知道錯誤的來源究竟是什麼。 –

Jquery toggle函數切換元素的可見性。它基本上將css屬性display設置爲display: none。如果您希望切換梯度時「gradientifyied」元素中的內容仍然可見，那麼您不能使用Jquery.toggle。

令人遺憾的是，一旦它們被設置在元素上，那麼切換元素上的漸變的唯一方法就是將它從DOM中一起移除。

我們可以在漸變應用之前創建乾淨元素的副本，並且當我們要刪除漸變時，我們從DOM中刪除舊元素並插入我們保留的副本。

function toggleGradients() { 
 
    var gradientTargetCopy = $(".gradientTarget").clone() 
 
    var gradientsOff = true; 
 
    return function() { 
 
    if (gradientsOff) { 
 
     $('.gradientTarget').gradientify({ 
 
     gradients: [ 
 
      { start: [49,76,172], stop: [242,159,191] }, 
 
      { start: [255,103,69], stop: [240,154,241] }, 
 
      { start: [33,229,241], stop: [235,236,117] } 
 
     ] 
 
     }); 
 
    } else { 
 
     $('.gradientTarget').remove() 
 
     $('body').append(gradientTargetCopy) 
 
     gradientTargetCopy = $(".gradientTarget").clone() 
 
    } 
 
    gradientsOff = !gradientsOff 
 
    } 
 
} 
 

 
$('#btn').click(toggleGradients());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://codefog.github.io/jquery-gradientify/jquery.gradientify.min.js"></script> 
 

 
<body> 
 
    <button type="button" id="btn">Toggle gradients</button> 
 
    <div class="gradientTarget" style="width: 100px; height: 100px;">Hello!</div> 
 
</body>

來源

2016-12-02 01:52:28

感謝您的解釋。它真的起作用了！ –

只需使用普通的JavaScript。

var x = 3; //Length of amount of color options you want 
var bgcolor_num = Math.floor((Math.random() * x) + 1); 
     setInterval(function() { 
      if (bgcolor_num === 1) { 
       bgcolor = "#FF0000"; 
       bgcolor_num = 2; 
      } else if (bgcolor_num === 2) { 
       bgcolor = "#00FF00"; 
       bgcolor_num = 3; 
      } else { 
       bgcolor = "#0000FF"; 
       bgcolor_num = 1; 
      } 

      document.getElementById('whatever').style.backgroundColor = bg_color; 
     }, 12000);

會發生什麼，它定義了一個變量x，並隨機化了一個從1到x的數字。然後，間隔（每12秒運行一次; 12,000毫秒）確定數字bgcolor_num是1，2，3還是別的。請記住，您擁有的選項數量必須等於x。如果沒有，它將作爲「其他」運行，並將從顏色選項＃1開始。

確保您爲您的div設置了ID並重新配置實際觸發更改的部分！

如果你想要一個這樣的例子，你可以隨時去我的網站typrograms.com/RGB.html並右鍵點擊查看源代碼！我使用類似的方法，它會慢慢改變顏色。

來源

2016-12-02 01:42:00

這是非常好的解釋。我必須更深入地挖掘它...非常感謝！ –

切換功能，gradientifies背景顏色

回答

相關問題