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

[入库:2005年8月18日] [更新:2007年3月25日]

本文简介:选择自 nbpig 的 blog

        超链接,一般的做法是给一个title属性,这样用户的鼠标悬停在超链接上的时候,它会显示title的内容。但是,你是否厌倦了千篇一律的鼠标悬停效果呢?

       当然,也有这方面很炫的代码,但是才跨浏览器方面功夫还是不够,呵呵。我遇到一个不错的css,在ie和firefox下浏览一样的效果。

      下图是实际运行的效果:

实际的效果大家可以参考:校园招聘一网打尽 http://www.xyzp.net/index.html

代码如下:

/*************************************************************************

  dw_viewport.js
  version date nov 2003
 
  this code is from dynamic web coding
  at http://www.dyn-web.com/
  copyright 2003 by sharon paine
  see terms of use at http://www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  this notice must be retained in the code as is!

*************************************************************************/ 
 
var viewport = {
  getwinwidth: function () {
    this.width = 0;
    if (window.innerwidth) this.width = window.innerwidth - 18;
    else if (document.documentelement && document.documentelement.clientwidth)
    this.width = document.documentelement.clientwidth;
    else if (document.body && document.body.clientwidth)
    this.width = document.body.clientwidth;
  },
 
  getwinheight: function () {
    this.height = 0;
    if (window.innerheight) this.height = window.innerheight - 18;
   else if (document.documentelement && document.documentelement.clientheight)
    this.height = document.documentelement.clientheight;
   else if (document.body && document.body.clientheight)
    this.height = document.body.clientheight;
  },
 
  getscrollx: function () {
    this.scrollx = 0;
   if (typeof window.pagexoffset == "number") this.scrollx = window.pagexoffset;
   else if (document.documentelement && document.documentelement.scrollleft)
    this.scrollx = document.documentelement.scrollleft;
   else if (document.body && document.body.scrollleft)
    this.scrollx = document.body.scrollleft;
   else if (window.scrollx) this.scrollx = window.scrollx;
  },
 
  getscrolly: function () {
    this.scrolly = 0;   
    if (typeof window.pageyoffset == "number") this.scrolly = window.pageyoffset;
    else if (document.documentelement && document.documentelement.scrolltop)
    this.scrolly = document.documentelement.scrolltop;
   else if (document.body && document.body.scrolltop)
    this.scrolly = document.body.scrolltop;
   else if (window.scrolly) this.scrolly = window.scrolly;
  },
 
  getall: function () {
    this.getwinwidth(); this.getwinheight();
    this.getscrollx();  this.getscrolly();
  }
 
}

/*************************************************************************
    dw_event.js (version date feb 2004)
       
    this code is from dynamic web coding at http://www.dyn-web.com/
    see terms of use at http://www.dyn-web.com/bus/terms.html
    regarding conditions under which you may use this code.
    this notice must be retained in the code as is!
*************************************************************************/

var dw_event = {
 
  add: function(obj, etype, fp, cap) {
    cap = cap || false;
    if (obj.addeventlistener) obj.addeventlistener(etype, fp, cap);
    else if (obj.attachevent) obj.attachevent("on" + etype, fp);
  },

  remove: function(obj, etype, fp, cap) {
    cap = cap || false;
    if (obj.removeeventlistener) obj.removeeventlistener(etype, fp, cap);
    else if (obj.detachevent) obj.detachevent("on" + etype, fp);
  },

本文关键:一个优秀的超链接鼠标悬停提示CSS+js
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top