<script type="text/javascript">
$(function(){
//定义class名称的变量
var dtName = 0;
//给document绑定鼠标移动事件
$(document).mousemove(function(e){
dtName++;//鼠标移动时变量累加
var x = e.clientX;//获取鼠标坐标位X轴
var y = e.clientY;//获取鼠标坐标位Y轴
/**
* 当鼠标移动时向body中追加DIV
* dtName"+dtName+"' 为动态追加的class名称,用于在删除时使用
* left:"+(x-50)+"px;top:"+(y-50) 将鼠标当前坐标位的值赋给动态创建元素的Left和Top
* border-color:"+rondomColor()+ 调用随机颜色值函数,用于生成随机颜色值
*/
$("body").append(
"<div class='box dtName"+dtName+"' style='left:"+(x-50)+"px;top:"+(y-50)+"px;border-color:"+rondomColor()+";'></div>"
);
/**
* 删除动态创建的DIV
*/
//将动态创建的DIV宽度与高度在用500毫秒的时间将其设置为0
$(".dtName"+dtName).animate({width:0,height:0},500,function(){
//设置回调函数 将其在body中删除
$(this).remove();
});
});
//封装生成随机颜色值的函数
function rondomColor(){
//随机生成0~256之间的随机数
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
//将随机生成的数值当做rgb的参数返回
return "rgb("+r+","+g+","+b+")"
}
});
</script>