京东图片遍历

HTML部分:

<div id="lifeservice" class="serve">
<ul>
<li>
<a href="#" style="color: red">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="">
<i></i>
<span>机票</span>
</a>
</li>
<li>
<a href="">
<i></i>
<span>电影票</span>
</a>
</li>
<li>
<a href="">
<i></i>
<span>游戏</span>
</a>
</li>
<li>
<i></i>
<a href="">
<span>彩票</span>
</a>
</li>
<li>
<i></i>
<a href="">
<span>团购</span>
</a>
</li>
<li>
<i></i>
<a href="">
<span>酒店</span>
</a>
</li>
<li>
<i></i>
<a href="">
<span>水电煤</span>
</a>
</li>
<li>
<i></i>
<a href="">
<span>众筹</span>
</a>
</li>
<li>
<i></i>
<a href="">
<span>理财</span>
</a>
</li>
<li>
<i></i>
<a href="">
<span>礼品卡</span>
</a>
</li>
<li>
<a href="">
<i></i>
<span>白条</span>
</a>
</li>
</ul>

CSS部分:
@charset "UTF-8";
.serve {
height: 251px;
/**/
height:251px ;
overflow: hidden;
}
.serve ul{
width:252px ;
}
.serve ul li{
width: 62px;
height: 70px;
border-top: 1px solid black;
float:left;
margin-left: -1px;
border-top: 0;
list-style: none;
position: relative;
}
.serve ul li a{
display: block;
height: 70px;
text-align: center;
padding-top: 46px;
text-decoration: none;

}
.serve ul li i{
top:12px;
left:18px;
width: 25px;
height: 25px;
background: url(images/1.png) no-repeat right top ;
position: absolute;
}

JS部分:
<script>
var Life=document.getElementById("lifeservice").getElementsByTagName("i");
for(var i=1;i<=Life.length;i++){
Life[i].style.backgroundPosition="0 "+(-25*i)+"px";
}
</script>

 



 

posted @ 2018-04-11 22:47  Daisy0331  阅读(165)  评论(0编辑  收藏  举报