在我的博友无主题那里看到的一个特效，就是点击网页，会出现一个计算页面点击次数的特效，感觉挺有意思，跑去看看他的代码写法，然后我发现代码的效率还有改进的地方，于是我就手动修改了一番，一起来看看我的代码是怎么写的。
原来代码
<script>
var _click_count=0;
$("body").bind("click",function(e){ //直接给body一个事件好了.
//var n=Math.round(Math.random()*100);//随机数
var $i=$("<b>").text("+"+(++_click_count));//添加到页面的元素
var x=e.pageX,y=e.pageY;//鼠标点击的位置
$i.css({
"z-index":99999,
"top":y-15,
"left":x,
"position":"absolute",
"color":"red"
});
$("body").append($i);
$i.animate(
{"top":y-180,"opacity":0},
1500,
function(){$i.remove();}
);
e.stopPropagation();
});
</script>改进地方
- 点击每次不用重新生成元素，其实改变的只有元素里面的数字而已，浪费
- 每次都要重新生成一个css,重复了，需要改进
- 点击区域应该为document，而不是body
- 动画执行过程中如果发生多次点击时，因为需要计数，所以要停止上一个动画的执行
改进代码
[dmengl2v]
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();
})[/dmengl2v]
后话
还可以给这个计数增加一个cookie，这个就是后话了。
