京东图片遍历

标签：img   col   pos   AC   script   hidden   repeat   5*   height   

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>

京东图片遍历

标签：img   col   pos   AC   script   hidden   repeat   5*   height   

原文地址：https://www.cnblogs.com/Daisy0331/p/8799254.html