Maison >interface Web >tutoriel HTML >JS求代码_html/css_WEB-ITnose
JS求代码_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:44:351011parcourir
解释下我的问题：
我想做个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> Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：SVG Drawing AnimationArticle suivant：DOCTYPE是什么鬼？文档模式又是什么鬼？_html/css_WEB-ITnose