基于JQuery的数字改变的动画效果--可用来做计数器
因为要求是动态的,我就想到了应该是位置的变化,想到之前用过的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的原理不懂,只是效果实现了,把我的思路写一下,第一次用博客园,不怎么会使,有错误请指正,谢谢
相关推荐
-
jQuery实现简易的输入框字数计数功能示例
本文实例讲述了jQuery实现简易的输入框字数计数功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-1.7.2.min.js"></scr
-
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
效果图如下 : 源代码如下 : 复制代码 代码如下: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("textarea"
-
基于jQuery的计算文本框字数的代码
一.功能: 1.用户边输入计算同时进行,告诉用户还剩余多少可输入的字数; 2.当超过规定的字数后,点击确定,会让输入框闪动 二.功能分析 1.重点是用什么事件? 标准浏览器用oninput,而IE则使用onpropertychange ,这两个事件的发生条件,是文本框的值发生改变. 2.字数的计算. 2.1一个中文算两个,一个符号或数字,英文,算一个.(如果是规定140个字,乘以2,那么就是280个) 2.2需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数; 3.闪动背
-
jquery限制输入字数,并提示剩余字数实现代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
jQuery maxlength文本字数限制插件
实现这个效果有很多方法,这里就介绍一种jQuery插件maxlength,它的使用非常简单,让我们先看看演示: jquery maxlength演示地址演示代码打包下载看看Demo中的重点代码: 1.载入maxlength.js <script type="text/javascript" src="maxlength.js"></script> 2.加入函数,Demo中有3个例子,你可以根据实际需要选择不同的函数,不过最后一个例子对于中文而
-
基于jQuery实现仿微博发布框字数提示
jQuery实现仿微博发布框字数提示,主要是运用字符串操作! 效果图: HTML: <textarea name="" id="" cols="30" rows="10"></textarea><br> <span>你还可以输入<strong style="color:red;">140</strong>个字</span>
-
文本框的字数限制功能jquery插件
后来在网上闲逛的时候突然发现一个比较好的文本框的字数限制的jquery plugin,简单好用效果如下图 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999
-
JQuery 表单中textarea字数限制实现代码
复制代码 代码如下: $('#FashionStatement').val(''); var limitNum = 1000; var pattern = '还可以输入' + limitNum + '字'; $('#statementRowChk').html(pattern); $('#FashionStatement').keyup( function() { var remain = $(this).val().length; if (remain > 1000) { pattern =
-
jQuery计算textarea中文字数(剩余个数)的小程序
复制代码 代码如下: <div class="area"> <p> 还可以输入<b class="num">140</b>字</p> <textarea class="chackTextarea"></textarea> </div> <script type="text/java
-
jquery实现textarea输入框限制字数的方法
本文实例讲述了jquery实现textarea输入框限制字数的方法.分享给大家供大家参考.具体分析如下: 网上有使用属性 disabled 来实现,这个不好,想修改都没有修改.当然,这个也不是很完美. 复制代码 代码如下: <html> <head> <title> jquery完美实现textarea输入框限制字数</title> <meta http-equiv="content-type" content="text
-
基于jquery的inputlimiter 实现字数限制功能
看下效果图: 源代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en&qu
-
jQuery计算文本框字数及限制文本框字数的方法
一个中文算两个,一个符号或数字,英文,算一个.(如果是规定140个字,乘以2,那么就是280个).需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数; $(function(){ var $tex = $(".tex"); var $but = $(".but"); var ie = jQuery.support.htmlSerialize; var str = 0; var abcnum = 0; var maxNum = 280; var
随机推荐
- 深入学习JavaScript的AngularJS框架中指令的使用方法
- 利用VBS发送短信的实现代码(通过飞信)
- Java使用AES加密和解密的实例详解
- javascript字符串与数组转换汇总
- PHP编写简单的App接口
- php入门学习知识点二 PHP简单的分页过程与原理
- 详解在Python的Django框架中创建模板库的方法
- Windows下mysql5.7.18安装配置教程
- 超详细的mysql图文安装教程
- PHP中使用register_shutdown_function函数截获fatal error示例
- Vue 2.0的数据依赖实现原理代码简析
- linux 命令每天必学之tar命令
- jQuery动态增减行的实例代码解析(推荐)
- jQuery的一些特性和用法整理小结
- nodejs爬虫抓取数据乱码问题总结
- WinForm限制窗体不能移到屏幕外的方法
- 基于Android Service 生命周期的详细介绍
- PHP多线程模拟实现秒杀抢单
- Mysql5.7在windows7下my.ini文件加载路径及数据位置修改方法
- 浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器