点击页面计数效果

<!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>


你可能感兴趣的:(计数,点击,效果)