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 相关文章推荐
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
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
基于PHPExcel的常用方法总结
2013/06/13 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
js内存泄露的几种情况详细探讨
2013/05/31 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
个人小程序接入支付解决方案
2019/05/23 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
Python中内建函数的简单用法说明
2016/05/05 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
windows下python安装小白入门教程
2018/09/18 Python
python找出完数的方法
2018/11/12 Python
Python使用线程来接收串口数据的示例
2019/07/02 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
自我鉴定模板
2013/10/29 职场文书
业务员岗位职责范本
2013/12/15 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
个人查摆剖析材料
2014/10/16 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
2015年人事科工作总结
2015/04/28 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis
数据库之SQL技巧整理案例
2021/07/07 SQL Server