基于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 相关文章推荐
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
JS控制网页动态生成任意行列数表格的方法
Mar 09 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
React优化子组件render的使用
May 12 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
javascript每日必学之多态
2016/02/23 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python中的自定义函数学习笔记
2014/09/23 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
python3调用R的示例代码
2018/02/23 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python和Sublime整合过程图示
2019/12/25 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
后勤自我鉴定
2013/10/13 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
校园标语大全
2014/06/19 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
营运督导岗位职责
2015/04/10 职场文书