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 相关文章推荐
ASP Json Parser修正版
Dec 06 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
给js文件传参数(详解)
Jul 13 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
微信小程序实现图片选择并预览功能
Jul 25 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
使用Angular.js开发的注意事项
2016/10/19 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
Python简单读取json文件功能示例
2017/11/30 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Python列表操作方法详解
2020/02/09 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
护林防火标语
2014/06/27 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
保卫工作个人总结
2015/03/03 职场文书
八月一日观后感
2015/06/10 职场文书
李强优秀员工观后感
2015/06/16 职场文书
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL