A-A+

数字滚动

2016年03月18日 JavaScript 暂无评论 阅读 94 次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.min.css"/>
    <!-- Demo styles -->
    <style>
        html, body {
            position: relative;
            height: 100%;
        }
        body {
            background: #fff;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
            margin-left: auto;
            margin-right: auto;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
        }
        button{height:30px;}
        /*向上提示的图标*/
        .img_2 {
            height: auto;
            width: 25px;
            position: absolute;
            left: 50%;
            top: 92%;
            margin-left: -12px;
            border: 1px solid red;
            z-index: 2;

        }

        /*数字滚动*/
        .t_num {
            display: inline-block;
            line-height: 13px;
            margin: 2px 4px 0 4px;
        }
        .t_num i {
            width: 15px;
            height: 23px;
            display: inline-block;
            background: url(img/number.png) no-repeat;
            background-position: 0 0;
            text-indent: -999em;
        }

    </style>
</head>
<body>
            <div id="total">
                下载量:<span class="t_num"></span>次
            </div>
            <!-- Swiper JS -->
            <script src="js/swiper.min.js"></script>
            <script src="js/jquery-1.10.2.min.js"></script>
            <!-- Initialize Swiper -->
            <!--  swiper -->

<script>

    //    数字滚动
    function show_num(n){
        var it = $(".t_num i");
        var len = String(n).length;
        for(var i=0;i<len;i++){
            if(it.length<=i){
                $(".t_num").append("<i></i>");
            }
            var num=String(n).charAt(i);
            var y = -parseInt(num)*30;
            var obj = $(".t_num i").eq(i);
            obj.animate({
                        backgroundPositionY: y+"px",
                        backgroundPositionx:"0"
                    }, 'slow','swing',function(){}
            );
        }
    }
    $(function(){
        show_num(95224682);
    });
</script>
</body>
</html>
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录