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 相关文章推荐
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
将list转换为json失败的原因
Dec 17 Javascript
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
JavaScript实现网页留言板功能
Nov 23 Javascript
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 静态页面中显示动态内容
2009/08/14 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
教你如何用php实现LOL数据远程获取
2014/06/10 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
jquery二级导航内容均分的原理及实现
2013/08/13 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
tensorflow 打印内存中的变量方法
2018/07/30 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python requests证书问题解决
2019/09/05 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
pandas数据处理进阶详解
2019/10/11 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
写好自荐信的要点
2013/11/06 职场文书
团员的自我评价
2013/12/01 职场文书
迷你西餐厅创业计划书范文
2013/12/31 职场文书
教师求职自荐信
2014/03/09 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
家长会主持词开场白
2015/05/29 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python