鼠标浮上JS自动弹窗

由于工作需要要做一个鼠标浮上一个标签实现JS自动弹窗的功能，在网站找到了这个boxover.js但是这一个JS有一个问题就是不兼容Chrome和火狐浏览器还有就是弹窗的右边有破口，基于这些问题我改动了这个JS文件，现在这个弹窗功能已经兼容所有浏览器并且弹窗破口的功能已经没有了，下面我把代码贴出来方便大家使用。

改动后的JS代码如下：

/* --- BoxOver ---
/* --- v 2.1 17th June 2006
By Oliver Bryant with help of Matthew Tagg
http://boxover.swazz.org */
if (typeof document.attachEvent != 'undefined') {
   window.attachEvent('onload',init);
   document.attachEvent('onmousemove',moveMouse);
   document.attachEvent('onclick',checkMove); }

else {
   window.addEventListener('load',init,false);
   document.addEventListener('mousemove',moveMouse,false);
   document.addEventListener('click',checkMove,false);
}

var oDv=document.createElement("div");
var dvHdr=document.createElement("div");
var dvBdy=document.createElement("div");
var windowlock,boxMove,fixposx,fixposy,lockX,lockY,fixx,fixy,ox,oy,boxLeft,boxRight,boxTop,boxBottom,evt,mouseX,mouseY,boxOpen,totalScrollTop,totalScrollLeft;
boxOpen=false;
ox=10;
oy=10;
lockX=0;
lockY=0;

function init() {
oDv.appendChild(dvHdr);
oDv.appendChild(dvBdy);
oDv.style.position="absolute";
oDv.style.visibility = 'hidden';

document.body.appendChild(oDv);
}

function checkElemBO(txt) {
if (!txt || typeof(txt) != 'string') return false;
if ((txt.indexOf('header')>-1)&&(txt.indexOf('body')>-1)&&(txt.indexOf('[')>-1)&&(txt.indexOf('[')>-1))
return true;
else
return false;
}

function getParam(param,list) {
var reg = new RegExp('([^a-zA-Z]' + param + '|^' + param + ')\\s*=\\s*\\[\\s*(((\\[\\[)|(\\]\\])|([^\\]\\[]))*)\\s*\\]');
var res = reg.exec(list);
var returnvar;
if(res)
return res[2].replace('[[','[').replace(']]',']');
else
return '';
}

function Left(elem) {
var x=0;
if (elem.calcLeft)
  return elem.calcLeft;
var oElem=elem;
while(elem){
   if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderLeftWidth)))&&(x!=0))
   x+=parseInt(elem.currentStyle.borderLeftWidth);
   x+=elem.offsetLeft;
   elem=elem.offsetParent;
   }
oElem.calcLeft=x;
return x;
}

function Top(elem){
var x=0;
if (elem.calcTop)
return elem.calcTop;
var oElem=elem;
while(elem){
if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderTopWidth)))&&(x!=0))
   x+=parseInt(elem.currentStyle.borderTopWidth);
   x+=elem.offsetTop;
          elem=elem.offsetParent;
   }
   oElem.calcTop=x;
   return x;

}

var ah,ab;
function applyStyles() {
if(ab)
  oDv.removeChild(dvBdy);
if (ah)
  oDv.removeChild(dvHdr);
dvHdr=document.createElement("div");
dvBdy=document.createElement("div");
CBE.boCSSBDY?dvBdy.className=CBE.boCSSBDY:defBdyStyle();
CBE.boCSSHDR?dvHdr.className=CBE.boCSSHDR:defHdrStyle();
dvHdr.innerHTML=CBE.boHDR;
dvBdy.innerHTML=CBE.boBDY;
ah=false;
ab=false;
if (CBE.boHDR!='') {
  oDv.appendChild(dvHdr);
  ah=true;
}
if (CBE.boBDY!=''){
  oDv.appendChild(dvBdy);
  ab=true;
}
}

var CSE,iterElem,LSE,CBE,LBE, totalScrollLeft, totalScrollTop, width, height ;
var ini=false;

// Customised function for inner window dimension
function SHW() {
   if (document.body && (document.body.clientWidth !=0)) {
      width=document.body.clientWidth;
      height=document.body.clientHeight;
   }
   if (document.documentElement && (document.documentElement.clientWidth!=0) && (document.body.clientWidth + 20 >= document.documentElement.clientWidth)) {
      width=document.documentElement.clientWidth;
      height=document.documentElement.clientHeight;
   }
   return [width,height];
}

var ID = null;

//注意如果在页面的css代码中加入如下内容就不用在做这个兼容问题了如下 html{ overflow-y:hidden; overflow-x:hidden; }

oDv.style.left = ((fixposx) || (fixposx == 0)) ? fixposx : bodyScrollLet + mouseX + ox + lockX - spacing + "px";
oDv.style.top = ((fixposy) || (fixposy == 0)) ? fixposy : bodyScrollTop + mouseY + oy + lockY + "px";
}
}

function pauseBox(e) {
e?evt=e:evt=event;
boxMove=false;
evt.cancelBubble=true;
}

function showHideBox(e) {
oDv.style.visibility=(oDv.style.visibility!='visible')?'visible':'hidden';
}

function hideBox(e) {
oDv.style.visibility='hidden';
}

var COL=0;
var stopfade=false;
function fadeIn(fs) {
  ID=null;
  COL=0;
  oDv.style.visibility='visible';
  fadeIn2(fs);
}

function fadeIn2(fs) {
 COL=COL+fs;
 COL=(COL>1)?1:COL;
 oDv.style.filter='alpha(opacity='+parseInt(100*COL)+')';
 oDv.style.opacity=COL;
 if (COL<1)
 setTimeout("fadeIn2("+fs+")",20);
}

function fadeOut() {
oDv.style.visibility='hidden';

}

function isChild(s,d) {
while(s) {
  if (s==d)
   return true;
  s=s.parentNode;
}
return false;
}

var cSrc;
function checkMove(e) {
e?evt=e:evt=event;
cSrc=evt.target?evt.target:evt.srcElement;
if ((!boxMove)&&(!isChild(cSrc,oDv))) {
  fadeOut();
  if (CBE&&CBE.IEbugfix) {showSelects();}
  boxMove=true;
  CBE=null;
}
}

function showSelects(){
 var elements = document.getElementsByTagName("select");
 for (i=0;i< elements.length;i++){
 elements[i].style.visibility='visible';
 }
}

function hideSelects(){
 var elements = document.getElementsByTagName("select");
 for (i=0;i< elements.length;i++){
 elements[i].style.visibility='hidden';
 }
}

// check the name and version of browser
function browserinfo() {
    var Browser_Name = navigator.appName;
    var Browser_Version = parseFloat(navigator.appVersion);
    var Browser_Agent = navigator.userAgent;

var Actual_Version, Actual_Name;

var is_IE = (Browser_Name == "Microsoft Internet Explorer");
var is_NN = (Browser_Name == "Netscape");

    if (is_NN) {
        //upper 5.0 need to be process,lower 5.0 return directly
        if (Browser_Version >= 5.0) {
            var Split_Sign = Browser_Agent.lastIndexOf("/");
            var Version = Browser_Agent.indexOf(" ", Split_Sign);
            var Bname = Browser_Agent.lastIndexOf(" ", Split_Sign);

            Actual_Version = Browser_Agent.substring(Split_Sign + 1, Version);
            Actual_Name = Browser_Agent.substring(Bname + 1, Split_Sign);
        }
        else {
            Actual_Version = Browser_Version;
            Actual_Name = Browser_Name;
        }
    }
    else if (is_IE) {
        var Version_Start = Browser_Agent.indexOf("MSIE");
        var Version_End = Browser_Agent.indexOf(";", Version_Start);
        Actual_Version = Browser_Agent.substring(Version_Start + 5, Version_End)
        Actual_Name = Browser_Name;

        if (Browser_Agent.indexOf("Maxthon") != -1) {
            Actual_Name += "(Maxthon)";
        }
        else if (Browser_Agent.indexOf("Opera") != -1) {
            Actual_Name = "Opera";
            var tempstart = Browser_Agent.indexOf("Opera");
            var tempend = Browser_Agent.length;
            Actual_Version = Browser_Agent.substring(tempstart + 6, tempend)
        }
    }
    else {
        Actual_Name = "Unknown Navigator"
        Actual_Version = "Unknown Version"
    }
    /*------------------------------------------------------------------------------
    --Your Can Create new properties of navigator(Acutal_Name and Actual_Version) --
    --Userage:                                                                     --
    --1,Call This Function.                                                        --
    --2,use the property Like This:navigator.Actual_Name/navigator.Actual_Version;--
    ------------------------------------------------------------------------------*/
    navigator.Actual_Name = Actual_Name;
    navigator.Actual_Version = Actual_Version;

    /*---------------------------------------------------------------------------
    --Or Made this a Class.                                                     --
    --Userage:                                                                  --
    --1,Create a instance of this object like this:var browser=new browserinfo;--
    --2,user this instance:browser.Version/browser.Name;                        --
    ---------------------------------------------------------------------------*/
    this.Name = Actual_Name;
    this.Version = Actual_Version;
}

调用方式如下：

注意事项：

①这个JS引用要放在页面的最下方，就是在页面加载完毕以后再调用这个JS文件

②在希望鼠标浮上以后弹窗的HTML便签上要强制性的写这个属性tamade在调用方式里面写了。

就是这些了，希望对园子里的朋友有用......

posted @ 2012-07-31 14:09 TealerProg Views(754) Comments(0) Edit 收藏举报

刷新页面返回顶部

TealerProg

鼠标浮上JS自动弹窗

公告