久久久精品一区ed2k-女人被男人叉到高潮的视频-中文字幕乱码一区久久麻豆樱花-俄罗斯熟妇真实视频

jquery實現數字滾動效果

網頁上如果有數字需要經常變動，又想讓它比較明顯，肯定是加個動畫比較顯眼，利用jquery的animate可以很容易的實現，不需要css3，因此可以兼容低版本的ie瀏覽器。先看效果圖：

站在用戶的角度思考問題，與客戶深入溝通，找到雨山網站設計與雨山網站推廣的解決方案，憑借多年的經驗，讓設計與互聯網技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網站設計制作、成都網站設計、企業(yè)官網、英文網站、手機端網站、網站推廣、域名與空間、網頁空間、企業(yè)郵箱。業(yè)務覆蓋雨山地區(qū)。

jquery實現數字滾動效果

代碼比較簡單，沒有整理成插件形式，暫時全堆在html里了。直接上代碼：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>演示</title>
    <script src="jquery-1.7.1.min.js"></script>
    <style>
    .digits{
        display:inline-block;
        height:30px;
        margin-right:50px;
    }
    .digits i{
        background:url(numbers.png) no-repeat;
        display:inline-block;
        float:left;
        height:30px;
        width:18px;
    }
    .digits b{
        background:url(numbers.png) no-repeat 0 -398px;
        display:inline-block;
        float:left;
        height:30px;
        width:10px;
    }
    </style>
    <script>
    function setNumber(dom, number){
        var n = String(number),len = n.length;

        //如果新的數字短于當前的，要移除多余的i
        if(dom.find("i").length > len){
            dom.find("i:gt(" + (len - 1) + ")").remove();
        }
        
        //移除千分位分隔符
        dom.find("b").remove();

        //開始填充每一位
        for(var i=0;i<len;++i){
            //位數不足要補
            if(dom.find("i").length < len){
                dom.append("<i></i>");
            }
            var obj = dom.find("i").eq(i);
            var y = -40 * parseInt(n.charAt(i), 10);

            //加分隔符
            if(i < len - 1 && (len - i - 1) % 3 == 0)
                $("<b></b>").insertAfter(obj);

            //利用動畫變換數字
            obj.animate({ backgroundPositionY:y+"px" }, 350);
        }
    };

    $(function(){
        //測試，每秒更新隨機數
        window.setInterval(function(){
            setNumber($("#a"), Math.floor(Math.random() * 1000000));
            setNumber($("#b"), Math.floor(Math.random() * 1000000));
        }, 1000);
    });
</script>
</head>
<body>
    <div id="a" class="digits"></div>
    <div id="b" class="digits"></div>
</body>
</html>

代碼與資源放在附件里了。

附件：http://down.51cto.com/data/2365488

本文題目：jquery實現數字滾動效果
本文路徑：http://www.sd-ha.com/article6/jgigog.html

成都網站建設公司_創(chuàng)新互聯，為您提供云服務器、外貿建站、動態(tài)網站、網站設計、網站設計公司、響應式網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

成都做網站