首页 > 其他 > 详细

点击页面计数效果

时间:2016-01-08 20:33:03      阅读:182      评论:0      收藏:0      [点我收藏+]
<!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=utf-8">

    <title>firstDayDemo2</title>

<script src=‘jquery-1.11.3.js‘></script>

</head>

<body>

<b id="counts" style="z-index: 99999; position: absolute; color: red; display: none; top: 809px; left: 4px; opacity: 0;"></b>

</table>

<script>


//点击页面计算点击次数

var clickCount = 0, $i=$(‘<b>‘);

$i.css({

‘z-index‘:99999,

‘position‘:‘absolute‘,

‘color‘:‘red‘,

‘display‘:‘none‘

});

$(‘body‘).append($i);

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

var x = e.pageX, y = e.pageY;

$i.text(‘+‘+(++clickCount)).css({

‘display‘:‘block‘,

‘top‘:y-15,

‘left‘:x,

‘opacity‘:1

}).stop(true,false).animate({

‘top‘:y-180,

‘opacity‘:0

},800,function(){

$i.hide();

});

e.stopPropagation();

})

</script>

</body>

</html>


本文出自 “小小程序员” 博客,请务必保留此出处http://yanghaifeng.blog.51cto.com/2231467/1733002

点击页面计数效果

原文:http://yanghaifeng.blog.51cto.com/2231467/1733002

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!