JS中鼠标进入元素提示，同时实现封装

1，事情是这样，突然看到这样的一个效果结果找了一个效果，过段添加上去了，先贴出来代码

<div id="sensor-note"  style="position:absolute;width:180px;padding:10px;top:0px;opacity: 0.5; display: none;">
		　　里面需要填充的内容
</div>
<div id="sensor">鼠标滑动上去显示</div>

	$("#sensor").mousemove(function(event){
	    var e=event || window.event;
	    var obj = document.getElementById("sensor-note");
	    var posX=e.clientX;
	    var posY=e.clientY;
	    obj.style.left=posX+10+"px";
	    obj.style.top=posY-20+"px";
	    obj.style.display = "block";
	    $("#sensor").mouseout(function(){
	        //$("#sensor-note").hide("slow");
			$("#sensor-note").css({"display":"none"});
	    });
	});

以上为实现代码，很简单，老是这么写，其实很多时候都这么实现的，很多都写在页面上，如果要重用，还得复制一边，觉得比较low，那就试试封装吧

因为要基于元素触发事件所以用  $.fn比较好，而不用 $.extend

• $.extend(object);为扩展jQuery类本身.为类添加新的方法。 
• $.fn.extend(object);给jQuery对象添加方法。 

 

(function($) {


	  $.fn.Tip=function(){
		   var $this = $(this); //当前响应事件对象
		   $this.on("mousemove",function(event){
			   var e=event || window.event;
			   var posX=e.clientX+10+"px";
			   var posY=e.clientY-20+"px";					   
			   if($("#sensor-note").length<0){
			   var el='<div id="sensor-note"  style="position:absolute;width:180px;padding:10px;top:0px;opacity: 0.5; ">里面需要填充的内容</div>'  //对象不存在时候就创建
			   $this.append(el)  //显示到页面上
			   $(el).css({"left":posX,"top":posY,"display":"block"});  //更改样式显示
			}
			else{
				$("#sensor-note").css({"left":posX,"top":posY,"display":"block"});
			}
			$this.on("mouseout",function(){
					  $("#sensor-note").css({"display":"none"});
					//$(el).remove();
			  });
		   }); 
	  }

	 
}(jQuery))


//调用
$("#sensor").Tip();

简单写到这里，欢迎指教