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();
简单写到这里，欢迎指教
