底部滑动的说明图层

人气：　来源：本站原创　作者：佚名　所属栏目：导航类　[切换到繁體中文]

介绍：当鼠标经过链接时，从页面底部滑上来一个说明图层。

演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>站长手册_特效演示_底部滑动的说明图层</title>
<style><!--body,td{font-size: 12px;}--></style>
<script language="JavaScript1.2">
var description=new Array()
description[0]='这是一个链接说明1'
description[1]='<b>这是一个链接说明2'
description[2]='<i>这是一个链接说明3'

//Do not edit below here

iens6=document.all||document.getElementById
ns4=document.layers

<!--GLOBAL VARIABLES-->
var thename
var theobj
var thetext
var winHeight
var winPositionFromTop
var winWidth
var startH=2
var openTimer
<!--END GLOBAL VARIABLES-->

<!--GLOBAL FUNCTIONS-->
function setObj(text,theswitch,inwidth,inheight) {
	thetext=text
	if(iens6){
		thename = "viewer"
		theobj=document.getElementById? document.getElementById(thename):document.all.thename
		winHeight=100
			if(iens6&&document.all) {
				winPositionFromTop=document.body.clientHeight
				winWidth=(document.body.clientWidth-document.body.leftMargin)
			}
			if(iens6&&!document.all) {
				winPositionFromTop=window.innerHeight
				winWidth=(window.innerWidth-(document.body.offsetLeft+30))
			}
			if(theswitch=="override") {
				winWidth=inwidth
				winHeight=inheight
			}
		theobj.style.width=winWidth
		theobj.style.height=startH
			if(iens6&&document.all) {
				theobj.style.top=document.body.scrollTop+winPositionFromTop
				theobj.innerHTML = ""
				theobj.insertAdjacentHTML("BeforeEnd","<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>")
			}
			if(iens6&&!document.all) {
				theobj.style.top=window.pageYOffset+winPositionFromTop
				theobj.innerHTML = ""
				theobj.innerHTML="<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>"
			}
	}
	if(ns4){
		thename = "nsviewer"
		theobj = eval("document."+thename)
		winPositionFromTop=window.innerHeight
		winWidth=window.innerWidth
		winHeight=100
			if(theswitch=="override") {
				winWidth=inwidth
				winHeight=inheight
			}
		theobj.moveTo(0,eval(window.pageYOffset+winPositionFromTop))
		theobj.width=winWidth
		theobj.clip.width=winWidth
		theobj.document.write("<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>")
		theobj.document.close()
	}
	viewIt()
}

function viewIt() {
	if(startH<=winHeight) {
		if(iens6) {
			theobj.style.visibility="visible"
				if(iens6&&document.all) {
					theobj.style.top=(document.body.scrollTop+winPositionFromTop)-startH
				}
				if(iens6&&!document.all) {
					theobj.style.top=(window.pageYOffset+winPositionFromTop)-startH
				}
			theobj.style.height=startH
			startH+=2
			openTimer=setTimeout("viewIt()",10)
		}
		if(ns4) {
			theobj.visibility = "visible"
			theobj.moveTo(0,(eval(window.pageYOffset+winPositionFromTop)-startH))
			theobj.height=startH
			theobj.clip.height=(startH)
			startH+=2
			openTimer=setTimeout("viewIt()",10)
		}
	}else{
		clearTimeout(openTimer)
	}
}

function stopIt() {
	if(iens6) {
		theobj.innerHTML = ""
		theobj.style.visibility="hidden"
		startH=2
	}
	if(ns4) {
		theobj.document.write("")
		theobj.document.close()
		theobj.visibility="hidden"
		theobj.width=0
		theobj.height=0
		theobj.clip.width=0
		theobj.clip.height=0
		startH=2
	}
}
<!--END GLOBAL FUNCTIONS-->
</script>
</head>
<body bgcolor="" 无>
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<layer name="nsviewer" bgcolor="#FFFFCC" style="border-width:thin;z-index:1"></layer>
<script language="JavaScript1.2">
if (iens6){
document.write("<div id='viewer' style='background-color:#FFFFCC;visibility:hidden;position:absolute;left:0;width:0;height:0;z-index:1;overflow:hidden;border:1px ridge white'></div>")
}
if (ns4){
	hideobj = eval("document.nsviewer")
	hideobj.visibility="hidden"
}
</script>
<b>例子</b><br>
<a href="#" onmouseover="setObj(description[1],'override',550,30)"  onmouseout="clearTimeout(openTimer);stopIt()">测试</a>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：无
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

//Do not edit below here

iens6=document.all||document.getElementById
ns4=document.layers

var thename
var theobj
var thetext
var winHeight
var winPositionFromTop
var winWidth
var startH=2
var openTimer

function setObj(text,theswitch,inwidth,inheight) {
thetext=text
if(iens6){
  thename = "viewer"
  theobj=document.getElementById? document.getElementById(thename):document.all.thename
  winHeight=100
   if(iens6&&document.all) {
    winPositionFromTop=document.body.clientHeight
    winWidth=(document.body.clientWidth-document.body.leftMargin)
   }
   if(iens6&&!document.all) {
    winPositionFromTop=window.innerHeight
    winWidth=(window.innerWidth-(document.body.offsetLeft+30))
   }
   if(theswitch=="override") {
    winWidth=inwidth
    winHeight=inheight
   }
  theobj.style.width=winWidth
  theobj.style.height=startH
   if(iens6&&document.all) {
    theobj.style.top=document.body.scrollTop+winPositionFromTop
    theobj.innerHTML = ""
    theobj.insertAdjacentHTML("BeforeEnd","<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>")
   }
   if(iens6&&!document.all) {
    theobj.style.top=window.pageYOffset+winPositionFromTop
    theobj.innerHTML = ""
    theobj.innerHTML="<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>"
   }
}
if(ns4){
  thename = "nsviewer"
  theobj = eval("document."+thename)
  winPositionFromTop=window.innerHeight
  winWidth=window.innerWidth
  winHeight=100
   if(theswitch=="override") {
    winWidth=inwidth
    winHeight=inheight
   }
  theobj.moveTo(0,eval(window.pageYOffset+winPositionFromTop))
  theobj.width=winWidth
  theobj.clip.width=winWidth
  theobj.document.write("<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>")
  theobj.document.close()
}
viewIt()
}

function viewIt() {
if(startH<=winHeight) {
  if(iens6) {
   theobj.style.visibility="visible"
    if(iens6&&document.all) {
     theobj.style.top=(document.body.scrollTop+winPositionFromTop)-startH
    }
    if(iens6&&!document.all) {
     theobj.style.top=(window.pageYOffset+winPositionFromTop)-startH
    }
   theobj.style.height=startH
   startH+=2
   openTimer=setTimeout("viewIt()",10)
  }
  if(ns4) {
   theobj.visibility = "visible"
   theobj.moveTo(0,(eval(window.pageYOffset+winPositionFromTop)-startH))
   theobj.height=startH
   theobj.clip.height=(startH)
   startH+=2
   openTimer=setTimeout("viewIt()",10)
  }
}else{
  clearTimeout(openTimer)
}
}

function stopIt() {
if(iens6) {
  theobj.innerHTML = ""
  theobj.style.visibility="hidden"
  startH=2
}
if(ns4) {
  theobj.document.write("")
  theobj.document.close()
  theobj.visibility="hidden"
  theobj.width=0
  theobj.height=0
  theobj.clip.width=0
  theobj.clip.height=0
  startH=2
}
}

</script>

<layer name="nsviewer" bgcolor="#FFFFCC" style="border-width:thin;z-index:1"></layer>
<script language="JavaScript1.2">
if (iens6){
document.write("<div id='viewer' style='background-color:#FFFFCC;visibility:hidden;position:absolute;left:0;width:0;height:0;z-index:1;overflow:hidden;border:1px ridge white'></div>")
}
if (ns4){
hideobj = eval("document.nsviewer")
hideobj.visibility="hidden"
}
</script>
<b>例子</b><br>
<a href="#" onmouseover="setObj(description[1],'override',550,30)" onmouseout="clearTimeout(openTimer);stopIt()">测试</a>