基于JQuery的数字改变的动画效果--可用来做计数器


Posted in Javascript onAugust 11, 2010

因为要求是动态的,我就想到了应该是位置的变化,想到之前用过的JQuery,把里边的效果全试了试,最后选用了animate自定义,代码如下:

<html> 
<head> 
<title>testAnimate</title> 
<script type="text/javascript"> 
function changeNum(n) { //n设为想要改成的数字 
$(function () { 
$("counter").animate({ top: '+=20px', opacity: '0' }, "slow", function () { //让数字向下移动并消失,top为元素距网页顶部距离,opacity为透明度,值为0~1 
document.getElementById("counter").innerHTML = n; //等数字消失后变为n,网页里有id为counter的一个span元素,这段代码必须放在animate里边,否则数字消失之前它的数值就改变了 
}) 
.animate({ top: '-=40px' }, "slow") //数字n跳至原来位置的上方 
.animate({ top: '+=20px', opacity: '1' }, "slow"); //数字n出现并落至数字原来位置,opacity为0时是对象完全透明,就是消失,值为1时是完全显现 
}); 
} 
</script> 
</head> 
<body> 
<span id="counter">1</span> 
</body> 
</html>

我只是新手,JQuery的原理不懂,只是效果实现了,把我的思路写一下,第一次用博客园,不怎么会使,有错误请指正,谢谢
Javascript 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
js实现一个链接打开两个链接地址的方法
May 12 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 #Javascript
用js解决数字不能换行问题
Aug 10 #Javascript
JavaScript 错误处理与调试经验总结
Aug 10 #Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 #Javascript
javascript中的prototype属性实例分析说明
Aug 09 #Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 #Javascript
jquery下json数组的操作实现代码
Aug 09 #Javascript
You might like
PHP 手机归属地查询 api
2010/02/08 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
PHP实现的增强性mhash函数
2015/05/27 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
深入理解 PHP7 中全新的 zval 容器和引用计数机制
2018/10/15 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
python中偏函数partial用法实例分析
2015/07/08 Python
python基础知识小结之集合
2015/11/25 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
django输出html内容的实例
2018/05/27 Python
原生python实现knn分类算法
2019/10/24 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
用python制作个视频下载器
2021/02/01 Python
python元组拆包实现方法
2021/02/28 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
大班开学家长寄语
2014/04/04 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
五年级上册复习计划
2015/01/19 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
js实现自动锁屏功能
2021/06/02 Javascript
一文搞懂MySQL索引页结构
2022/02/28 MySQL