html+CSS+JS控制Li背景颜色交替显示特效
1、新建html文档。
2、书写hmtl代码。
<body onLoad="initUl()">
<ul>
<li>百度经验</li>
<li>百度百科</li>
<li>百度贴吧</li>
<li>百度知道</li>
<li>百度百家</li>
<li>百度云</li>
</ul>
</body>
3、书写css代码。
<style>
html, body { width : 100%; height : 100%; margin : 0; padding : 0; }
.wrapper { position : relative; width : 420px; margin : 0 auto; padding : 0; font-size : 0; }
.icon { position : relative; display : inline-block; width : 100px; height : 100px; margin : 20px; border-radius : 18px; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; }
.l1{background:#ffffff}
.l2{background:#f4f4f4}
</style>
4、书写并添加js代码。
<script>
function initUl(){
var a=document.getElementsByTagName('ul');
for (var i=0;i<a.length;i++){
var v=document.getElementsByTagName('li');
var ii=1;
for (var j=0;j<v.length;j++){
if (v[j].parentNode==a[i]){
if (ii++%2==0){
v[j].className="l2";
}
else{
v[j].className="l1";
}
}
}
}
}
</script>
5、代码整体结构。
6、查看效果。
