学院首页>网页制作>CSS>一个优秀的超链接鼠标悬停提示CSS+js

一个优秀的超链接鼠标悬停提示CSS+js

作者: 来源: 添加时间:2006-5-21 21:05:29

var Tooltip = {
followMouse: true,
offX: 8,
offY: 12,
tipID: "tipDiv",
showDelay: 100,
hideDelay: 200,

ready:false, timer:null, tip:null,
 
init: function() { 
  if ( document.createElement && document.body && typeof
document.body.appendChild != "undefined" ) {
   if ( !document.getElementById(this.tipID) ) {
var el = document.createElement("DIV");
el.id = this.tipID; document.body.appendChild(el);
   }
   this.ready = true;
  }
},

show: function(e, msg) {
  if (this.timer) { clearTimeout(this.timer); this.timer = 0; }
  this.tip = document.getElementById( this.tipID );
  if (this.followMouse) // set up mousemove
   dw_event.add( document, "mousemove", this.trackMouse, true );
  this.writeTip("");  // for mac ie
  this.writeTip(msg);
  viewport.getAll();
  this.positionTip(e);
  this.timer = setTimeout("Tooltip.toggleVis('" + this.tipID + "', 'visible')", this.showDelay);
},

writeTip: function(msg) {
  if ( this.tip && typeof this.tip.innerHTML != "undefined" ) this.tip.innerHTML = msg;
},

positionTip: function(e) {
  if ( this.tip && this.tip.style ) {
   // put e.pageX/Y first! (for Safari)
   var x = e.pageX? e.pageX: e.clientX + viewport.scrollX;
   var y = e.pageY? e.pageY: e.clientY + viewport.scrollY;

   if ( x + this.tip.offsetWidth + this.offX > viewport.width + viewport.scrollX ) {
x = x - this.tip.offsetWidth - this.offX;
if ( x < 0 ) x = 0;
   } else x = x + this.offX;
 
   if ( y + this.tip.offsetHeight + this.offY > viewport.height + viewport.scrollY ) {
y = y - this.tip.offsetHeight - this.offY;
if ( y < viewport.scrollY ) y = viewport.height + viewport.scrollY - this.tip.offsetHeight;
   } else y = y + this.offY;
  
   this.tip.style.left = x + "px"; this.tip.style.top = y + "px";
  }
},

hide: function() {
  if (this.timer) { clearTimeout(this.timer); this.timer = 0; }
  this.timer = setTimeout("Tooltip.toggleVis('" + this.tipID + "', 'hidden')", this.hideDelay);
  if (this.followMouse) // release mousemove
   dw_event.remove( document, "mousemove", this.trackMouse, true );
  this.tip = null;
},

toggleVis: function(id, vis) { // to check for el, prevent (rare) errors
  var el = document.getElementById(id);
  if (el) el.style.visibility = vis;
},

trackMouse: function(e) {
 e = dw_event.DOMit(e);
   Tooltip.positionTip(e);
}

}

Tooltip.init();

第 2 页,共 2 页 [1] [2]
站内搜索