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脚本编程解决考试分数统计问题
Oct 18 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 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
杏林同学录(七)
2006/10/09 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
深入解析php中的foreach问题
2013/06/30 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
Jquery 的扩展方法总结
2011/10/01 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
DNA测试:Orig3n
2019/03/01 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
开放系统互连参考模型
2016/06/29 面试题
门卫人员岗位职责
2013/12/24 职场文书
中学运动会广播稿
2014/01/19 职场文书
新任教师自我鉴定
2014/02/24 职场文书
党员教师工作决心书
2014/03/13 职场文书
工厂标语大全
2014/10/06 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
sql注入报错之注入原理实例解析
2022/06/10 MySQL