溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
網頁上如果有數字需要經常變動，又想讓它比較明顯，肯定是加個動畫比較顯眼，利用jquery的animate可以很容易的實現，不需要css3，因此可以兼容低版本的ie瀏覽器。先看效果圖：
代碼比較簡單，沒有整理成插件形式，暫時全堆在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>代碼與資源放在附件里了。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
