Jquery实现鼠标跟随效果

2015/6/20 19:50:07 人评论 次浏览 分类:JavaScript



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

特效演示地址:http://sipeng.net/yanshi/mousemove/mm.html


上一篇:JS实现倒计时

下一篇:HTML5本地存储