【无标题】

最新推荐文章于 2024-01-18 23:25:36 发布

不死海的不死Niao

最新推荐文章于 2024-01-18 23:25:36 发布

阅读量101

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_39523807/article/details/127491323

版权

<div class="numSlider">
    <div class="numLine">
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
        <span class="num"><i class="num_icon"></i></span>
    </div>
</div>
<div>
　　<a href="javascript:;" class="numGo">go</a>
　　<a href="javascript:;" class="numReset">reset</a>
</div>

<style>
    .numSlider{
        width: 312px;
        height: 180px;
        background: url(http://images.cnblogs.com/cnblogs_com/yinn/1081699/o_bgbaidu01.png);
        position: relative;
    }
    .numLine{
        width: 460px;
        height: 28px;
        position: absolute;
        top: 73px;
        margin-left: 56px;
    }
    .num{
        float: left;
        width: 20px;
        height: 28px;
        margin-right: 3px;
        background: url(http://images.cnblogs.com/cnblogs_com/yinn/1081699/o_bgbaidu01.png) -263px -372px;
    }
    .num_icon{
        display: inline-block;
        width: 20px;
        height: 26px;
        background: url(http://images.cnblogs.com/cnblogs_com/yinn/1081704/o_bgbaidu02.png);
        background-position: 0px 0px;
        -moz-transition: background-position 1s ease;
        -webkit-transition: background-position 1s ease;
        -o-transition: background-position 1s ease;
    }
    .numGo,.numReset{
        border: 1px solid #4BAAEE;
        border-radius: 3px;
        float: left;
        padding: 1px 2px;
        margin: 5px 5px 0px 0px;
        text-decoration: none;
    }
</style>

<script type="text/javascript">
    $(".numGo").click(function(){
        var num = 1000000000+5201314+"";
        num = num.slice(1);
        for(var i = 0;i<num.length;i++){
            var n = parseInt(num[i]);
            if(n == 0){
                $(".num_icon").eq(i).css("backgroundPosition","0px "+(-27*10)+"px")
            }else{
                $(".num_icon").eq(i).css("backgroundPosition","0px "+(-27*n)+"px")
            }
        }
    });

    $(".numReset").click(function(){
        $(".num_icon").css("backgroundPosition","0px 0px");
    })
 </script>