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 相关文章推荐
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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中随机函数mt_rand()与rand()性能对比分析
2014/12/01 PHP
php格式化电话号码的方法
2015/04/24 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
python使用str &amp; repr转换字符串
2016/10/13 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
python编程实现归并排序
2017/04/14 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
Python count函数使用方法实例解析
2020/03/23 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
简述数据库的设计过程
2015/06/22 面试题
会计职业生涯规划范文
2014/01/04 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
出差报告格式模板
2014/11/06 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
Python学习之异常中的finally使用详解
2022/03/16 Python