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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
JS针对Array的各种操作汇总
Nov 29 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
js案例之鼠标跟随jquery版(实例讲解)
Jul 21 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
Angular项目如何升级至Angular6步骤全纪录
Sep 03 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安全防范技巧分享
2011/11/03 PHP
php实现的简单日志写入函数
2015/03/31 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
php中照片旋转 (orientation) 问题的正确处理
2017/02/16 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
Prototype Function对象 学习
2009/07/12 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
jQuery实现进度条效果代码
2015/12/17 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
js实现点击烟花特效
2020/10/14 Javascript
Python实现迭代时使用索引的方法示例
2018/06/05 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
小学语文教师年度考核个人总结
2015/02/05 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript