jquery+php实现滚动的数字特效


Posted in Javascript onNovember 29, 2015

有时我们需要动态的展示访问次数、下载次数等效果,我们可以借助jQuery结合后台php实现一个滚动的数字展示效果。

jquery+php实现滚动的数字特效

本文以实时获取某产品的下载次数为场景,前台定时执行javascript获取最新的下载次数,并滚动更新页面上的下载次数。
HTML
我们首先载入jQuery库文件和动画背景插件:animateBackground-plugin.js。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/animateBackground-plugin.js"></script>

然后我们在页面适当的位置中加入要展示数字滚动效果的html元素。

<div id="total"> 
  下载量:<span class="t_num"></span>次 
</div>

jQuery
首先来写一个函数show_num(),该函数用来实现动态滚动数字。我们将统计数字n进行拆分成一个个单独的数字,这些数字用<i></i>包围,通过调用插件backgroundPosition将图片定位到对应的每个数字上。

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; //y轴位置 
    var obj = $(".t_num i").eq(i); 
    obj.animate({ //滚动动画 
      backgroundPosition :'(0 '+String(y)+'px)' 
      }, 'slow','swing',function(){} 
    ); 
  } 
}

接着,我们通过ajax获取后台最新的下载次数。下面的代码是一个常见的jQuery的ajax请求,通过post请求到data.php,data.php或获取最新的下载次数,处理成功后则得到下载次数:data.count,然后调用show_num()实现数字滚动。

function getdata(){ 
  $.ajax({ 
    url: 'data.php', 
    type: 'POST', 
    dataType: "json", 
    cache: false, 
    timeout: 10000, 
    error: function(){}, 
    success: function(data){ 
      show_num(data.count); 
    } 
    }); 
}

最后,我们在页面加载完后要初始化数据,然后每隔3秒钟执行一次ajax请求,更新下载次数:

$(function(){ 
  getdata(); 
  setInterval('getdata()', 3000);//每隔3秒执行一次 
});

类似可以在统计网站访问量、统计影片播放次数、倒计时等方面得到应用,至于后台data.php如何处理数据不在本文叙述范围内,有兴趣的同学可以自己写一个诸如计数器之类的后台程序来返回data.count。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript修改css样式style
Apr 15 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
javascript作用域和闭包使用详解
Apr 25 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
angular6 填坑之sdk的方法
Dec 27 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
TypeScript高级用法的知识点汇总
Dec 17 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 #Javascript
Javascript闭包实例详解
Nov 29 #Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 #Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 #Javascript
javascript实现拖动元素交换位置
Nov 29 #Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 #Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 #Javascript
You might like
WHOIS类的修改版
2006/10/09 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
js转html实体的方法
2016/09/27 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
js实现登录验证码
2016/12/22 Javascript
基于Vue-cli快速搭建项目的完整步骤
2018/11/03 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
Python实现统计单词出现的个数
2015/05/28 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
python简单实现操作Mysql数据库
2018/01/29 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
python制作填词游戏步骤详解
2019/05/05 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
希特勒的演讲稿
2014/05/23 职场文书
九一八事变演讲稿
2014/09/05 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
酒店辞职书范文
2015/02/26 职场文书
实习生辞职信范文
2015/03/02 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
基于Python实现西西成语接龙小助手
2022/08/05 Golang