ホームページ >ウェブフロントエンド >htmlチュートリアル >JSコード request_html/css_WEB-ITnose
JSコード request_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:44:351011ブラウズ
私の問題を説明してください:
JS 特殊効果を作りたいです
どのような特殊効果ですか?
背景色は複数の DIV で回転し続けます
例: 灰色の背景、1 つの DIV では灰色で表示されます。2 秒後、次の DIV では灰色で表示されます。
ディスカッションへの返信 (解決策)
19880c1ecf38c1691172a18c891affca
93f0f5c25f18dab9d176bd4f6de5d30e meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
b2386ffb911b14667cb8f0f91ea547a7無題ドキュメント6e916e0f7d1e588d4f442bf645aedb2f 7daf0b124c93dca1a91f68a19819ba302cacc6d41bbb37262a98f745aa00fbf0
c9ccee2e6ea535a969eb3f532ad9fe89
#main div{ width:100px; height:100px; background-color:red; margin:10px;}
34e0f386d51996e3525d105335cd0746
cbc4fe4dd76c2a2373c1770b3909bd7a
428c41199dc7d7a8d8e11a9bf3a6a837 16b28748ea4df4d9c2150843fecfba68 div2">16b28748ea4df4d9c2150843fecfba68
678a046bebc5ee7951973d981586f38f16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
3f1c4e4b6b16bbbd69b2ee476dc4f83a
$(function() {
var divs = $("#main div");
var current = 0;
setInterval(function(){
$(this).css("background-color") ,"赤")
});
$(divs).each(function(e){
if(e==current){
$(divs[e]).css("背景色" ," black");
current++;
if(current>=divs.length){current=0;}
return false;
}
});
},2000);
});
e93e52dde75351c80ff1efc3f0eed83d
$('div:odd').addClass("class1");$('div:even').addClass("class2"); $('div:odd').addClass("class1");$('div:even').addClass("class2"); 上記を無視して、Interval を設定する必要があります
var idx=0;setInterval(function(){var divs = $('div');divs .removeClass("classShow");$('div:eq('+idx+')').addClass("classShow");idx++;idx=idx%divs.length;},2000); <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <style> .normal { width: 100px; height: 100px; border: solid 1px gray; margin: 10px; } .current { background-color: gray; } </style> <div id="container"> <div class="normal">1</div> <div class="normal">2</div> <div class="normal">3</div> <div class="normal">4</div> </div> <script> setInterval( play, 1000 * 2 ); // 获取所有的div play.divs = document.getElementById( "container" ).getElementsByTagName( "div" ); // 计时器 play.count = 0; function play() { var divs = play.divs; for (var i = 0; i < divs.length; i++) { if ( i === play.count % divs.length ) { divs[ i ].className = "normal current"; continue; } divs[ i ].className = "normal"; } play.count++; } </script></body></html>