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