jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)


Posted in Javascript onDecember 31, 2015

本文实例讲述了jQuery实现的点赞随机数字显示动画效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)

点击此处查看在线演示。

完整实例代码点击此处本站下载。

具体代码如下:

<!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="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery实现点赞数字累加动画效果</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
html,body{background:#fff;font-size:14px;font-family:"microsoft yahei";}
.tip{text-align:center;padding-top:10%;font-size:2em;}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$("html,body").on("click",function(e){
  anp(e);
})
function anp(e){
  var n=Math.round(Math.random()*10);
  var $i=$("<b>").text("+"+n);
  var x=e.pageX,y=e.pageY;
  $i.css({top:y-20,left:x,position:"absolute",color:"#E94F06"});
  $("body").append($i);
  $i.animate({top:y-180,opacity:0,"font-size":"1.4em"},1500,function(){
    $i.remove();
  });
  e.stopPropagation();
}
</script>
</head>
<body>
<div class="tip">点击页面任意位置查看效果</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
javascript基础知识之html5轮播图实例讲解(44)
Feb 17 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 #Javascript
javascript数据类型验证方法
Dec 31 #Javascript
jQuery操作基本控件方法实例分析
Dec 31 #Javascript
javascript图片延迟加载实现方法及思路
Dec 31 #Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 #Javascript
详解javascript高级定时器
Dec 31 #Javascript
jQuery动画效果相关方法实例分析
Dec 31 #Javascript
You might like
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
js读取本地文件的实例
2017/12/22 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python 变量初始化空列表的例子
2019/11/28 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python使用re模块验证危险字符
2020/05/21 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
美国儿童珠宝在线零售商:Loveivy
2019/05/22 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
综合素质自我评价怎么写
2014/09/14 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android