基于JQuery的数字改变的动画效果--可用来做计数器
2010-08-11 00:00
1181 查看
因为要求是动态的,我就想到了应该是位置的变化,想到之前用过的JQuery,把里边的效果全试了试,最后选用了animate自定义,代码如下:
我只是新手,JQuery的原理不懂,只是效果实现了,把我的思路写一下,第一次用博客园,不怎么会使,有错误请指正,谢谢
<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的原理不懂,只是效果实现了,把我的思路写一下,第一次用博客园,不怎么会使,有错误请指正,谢谢
相关文章推荐
- 基于JQuery的数字改变的动画效果--可用来做计数器
- 基于jQuery实现数字滚动效果
- 基于jQuery实现动态数字展示效果
- 基于jQuery实现图片推拉门动画效果的两种方法
- jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
- 基于Jquery的温度计动画效果
- jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
- 基于jquery的direction图片渐变动画效果
- 基于jQuery实现动态数字展示效果
- jquery简介之改变样式和动画效果
- 基于jquery的动画效果代码
- 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
- 基于jquery的动画效果代码
- 基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
- jQuery基于ajax实现带动画效果无刷新柱状图投票代码
- 基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
- jQuery基于ajax实现带动画效果无刷新柱状图投票代码
- 基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
- 23、使用jQuery实现动画效果(原理:改变CSS)
- 基于Jquery的温度计动画效果