html頁面設置一個跟隨鼠標移動的DIV(jQuery實現)

說明業務:鼠標放到某個標籤上,顯示一個div,並跟隨鼠標移動css

html頁面(直接放body裏面):html

      <a href="#" id="'+data[i].refundId+'"OrderInform"" data-placement="right" onmouseover="tip.start(this)" style="color:#00FFCC;left:;top:;"> 測試標籤</span></a>ide

        <div class="" id="OrderInform" style="position:absolute;display:none;width:217px;height:500px;border:solid 5px #000000">測試框</div>測試

jQuer:this

var tip={ spa

  $:function(ele){
  if(typeof(ele)=="object")
  return ele;
  else if(typeof(ele)=="string"||typeof(ele)=="number")
  return document.getElementById(ele.toString());
  return null;
  },
  mousePos:function(e){
  var x,y;
  var e = e||window.event;
  return{ x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
  y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop};
  },
  start:function(obj){
  var self = this;
  obj.onmousemove=function(e){
  console.log(e)
  var mouse = self.mousePos(e);
  console.log(mouse)
  var left= mouse.x + 'px';
  var top= mouse.y + 'px';
orm

  if(mouse.y+400>900){
  top=mouse.y-500+'px';
  }htm

  $("#OrderInform").css({'top':top,'left':left});
  $("#OrderInform").show();
};
obj.onmouseout=function(){
$("#OrderInform").hide(); //失去焦點關閉
};
}
}
seo

 (沒有太按語法結構來弄,可是主要代碼都在上面)ip

相關文章
相關標籤/搜索