Heim >Web-Frontend >HTML-Tutorial >JS求代码_html/css_WEB-ITnose
JS求代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:351011Durchsuche
解释下我的问题：
我想做个JS特效
什么特效呢？
一个背景色在几个DIV上不停的轮换
实例：
灰色背景，显示在一个DIV上呈灰色；2秒在下一个DIV上呈灰色；在过2秒，在下一个DIV上呈灰色；
回复讨论(解决方案)
nbsp;html >
<script></script>
<script> <br /> $(function(){ <br /> var divs = $("#main div"); <br /> var current = 0; <br /> setInterval(function(){ <br /> $(divs).each(function(){ <br /> $(this).css("background-color","red"); <br /> }); <br /> $(divs).each(function(e){ <br /> if(e==current){ <br /> $(divs[e]).css("background-color","black"); <br /> current++; <br /> if(current>=divs.length){current=0;} <br /> return false; <br /> } <br /> }); <br /> },2000); <br /> }); <br /> </script>
$('div:odd').addClass("class1");$('div:even').addClass("class2");
$('div:odd').addClass("class1");$('div:even').addClass("class2"); 忽略上面的，你这个是要setInterval
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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：SVG Drawing AnimationNächster Artikel：DOCTYPE是什么鬼？文档模式又是什么鬼？_html/css_WEB-ITnose