jquery实现数字滚动效果
2015-03-11 13:52
701 查看
网页上如果有数字需要经常变动,又想让它比较明显,肯定是加个动画比较显眼,利用jquery的animate可以很容易的实现,不需要css3,因此可以兼容低版本的ie浏览器。先看效果图:
代码比较简单,没有整理成插件形式,暂时全堆在html里了。直接上代码:
代码与资源放在附件里了。
附件:http://down.51cto.com/data/2365488
代码比较简单,没有整理成插件形式,暂时全堆在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实现数字滚动效果
- JQuery实现数字滚动增加的效果
- JQuery实现数字滚动增加的效果
- Jquery:单行滚动、批量多行滚动、文字图片翻屏滚动效果的实现
- 用 jQuery 实现页面滚动(Scroll)效果的完美方法
- jquery实现的视差滚动教程(视差大背景效果)
- jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
- jquery实现手动图片滚动效果
- jQuery+CSS实现的图片滚动效果
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- jquery实现可控方向的图片滚动效果
- jquery实现的视差滚动教程(视差大背景效果)
- jQuery实现自动左右滚动效果的代码实例
- jQuery向下滚动即时加载内容实现的瀑布流效果
- 在asp.net中使用JQuery的SlideViewer插件实现图片的滚动效果
- jQuery实现浮动层跟随页面滚动效果
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- jquery.blockUI.js实现上传滚动等待效果
- jQuery实现的瀑布流效果, 向下滚动即时加载内容
- 不用Margin使用jQuery实现左右滚动效果