jquery实现点击页面计算点击次数


Posted in Javascript onJanuary 23, 2015

代码很简单,这里就不多废话了,直接奉上:

$(function(){

      var w=0,tip=$("<b>");

      tip.css({

   "z-index":99999,position:"absolute",color:"red",display:"none"

              }),

      $("body").append(tip),//页面创建b标签用来显示数字

      $(document).on("click",function(e){

            var x=e.pageX,y=e.pageY;//获取点击页面坐标

            tip.text("+"+ ++w).css({//数字加1

              display:"block",top:y-15,left:x,opacity:1//定位显示

            }).stop(!0,!1).animate({//stop(stopAll,goToEnd),如果发生多次点击时,要停止上一个动画的执行

                              top:y-180,opacity:0},800,function(){

                                        tip.hide()

                                    }),

            e.stopPropagation()

      });

});

代码就到这里了,希望小伙伴们喜欢。

Javascript 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 #Javascript
PHP实现的各种中文编码转换类分享
Jan 23 #Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 #Javascript
PHPExcel中的一些常用方法汇总
Jan 23 #Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 #Javascript
使用angular写一个hello world
Jan 23 #Javascript
Javascript中的几种URL编码方法比较
Jan 23 #Javascript
You might like
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
php生成curl命令行的方法
2015/12/14 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python中二维阵列的变换实例
2014/10/09 Python
Python中的is和id用法分析
2015/01/26 Python
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
用Django写天气预报查询网站
2018/10/21 Python
python pillow模块使用方法详解
2019/08/30 Python
Python日志器使用方法及原理解析
2020/09/27 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
光声世纪笔试题目
2012/08/25 面试题
四风问题自查报告剖析材料
2014/02/08 职场文书
文明礼仪标语
2014/06/13 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
PHP使用QR Code生成二维码实例
2021/07/07 PHP
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js