21
5
内容纲要

这两天要做一个JavaScript的弹出层效果,就是鼠标移动上面的时候弹出一个效果层,移开的时候就消失,网上搜索了一下,得到下面的一段实现代码:
1、JavaScript部分

function $(){return document.getElementById?document.getElementById(arguments[0]):eval(arguments[0]);}
var OverH,OverW,ChangeDesc,ChangeH=50,ChangeW=50;
function OpenDiv(_Dw,_Dh,_Desc) {
$("BigBearLoading").innerHTML="";
OverH=_Dh;OverW=_Dw;ChangeDesc=_Desc;
$("BigBearLoading").style.display='';
if(_Dw>_Dh){ChangeH=Math.ceil((_Dh-10)/((_Dw-10)/50))}else if(_Dw<_dh){changew=math.ceil((_dw-10)/((_dh-10)/50))} top="(document.documentElement.clientHeight-10)/2+" left="(document.documentElement.clientWidth-10)/2+" nw="10,Nh=">OverW-ChangeW)ChangeW=2;
if (Nh>OverH-ChangeH)ChangeH=2;
Nw=Nw+ChangeW;Nh=Nh+ChangeH;
if(OverW>NwOverH>Nh) {
if(OverW>Nw) {
$("BigBearLoading").style.width=Nw+"px";
$("BigBearLoading").style.left=(document.documentElement.clientWidth-Nw)/2+"px";
}
if(OverH>Nh) {
$("BigBearLoading").style.height=Nh+"px";
$("BigBearLoading").style.top=(document.documentElement.clientHeight-Nh)/2+"px"
}
window.setTimeout("OpenNow()",10)
}else{
Nw=10;Nh=10;ChangeH=50;ChangeW=50;
$("BigBearLoading").innerHTML=ChangeDesc;
}
}
function CloseDiv()
{
$("BigBearLoading").style.display="none";
}

2、css部分

body {margin:0px}
#BigBearLoading {position:absolute;z-index:10;left:10px;top:10px;border:1px #666666 solid;background:#eeeeee;width:10px;height:10px}

3、div部分
创建一个span,包含下面的内容:
onmouseover="javascript:OpenDiv(500,300,'有时间请经常来看看大熊工作室噢')" onmouseout="javascript:CloseDiv()" 请用鼠标移动到这里
创建一个div,设置为:
id="BigBearLoading" ondblclick="this.style.display='none'" style="DISPLAY: none"


声明: 本文采用 BY-NC-SA 协议进行授权. 未标注“转”的文章均为原创,转载请注明转自: js弹出层,效果代码,鼠标移动消失

公告栏

欢迎大家来到我的博客,我是dodoro,希望我的博客能给你带来帮助。