JavaScript實現的超鏈接的title提示效果左側浮動效果,可以看作是一款垂直的菜單特效,帶說明,把鼠標移上去,就可以看到說明了。另外代碼中有豐富的注釋,您可以很詳細的閱讀。
演示:
<HTML><HEAD><TITLE>鏈接title說明浮動效果</TITLE><STYLE type=text/css>A{COLOR: #000000; FONT-SIZE: 9pt; TEXT-DECORATION: none}A:hover {COLOR: #00ff00; FONT-SIZE: 9pt;}</STYLE><META content="text/html; charset=gb2312" http-equiv=Content-Type><SCRIPT language=JavaScript><!--bname=navigator.appName; //測試瀏覽器類型bversion=parseInt(navigator.appVersion) //取瀏覽器版本if (bname=="Netscape") //如果是NSbrows=true //瀏覽器標志置為trueelse //否則brows=false //標志設為falsevar x=0; //var link=new Array(); //建立link數組用于存放每個說明條的內容function dspl(msg,bgcolor,dtop,delft){ //定義dspl數據結構,用于存放浮動說明條的內容,顏色以及坐標this.msg=msg; //內容this.bgcolor=bgcolor; //背景色this.dtop=dtop; //頂距this.dleft=delft; //左邊距}//下面依次列出個說明條的內容以及特征數據link[0]=new dspl('<b>[內容1]</b><font size=2>內容1,寫在這里……</font>','bisque',50,450)link[1]=new dspl('<b>[內容2]</b><font size=2>內容2,寫在這里……</font>','bisque',75,450)link[2]=new dspl('<b>[內容3]</b><font size=2>內容3,寫在這里……</font>','bisque',100,450)link[3]=new dspl('<b>[內容4]</b><font size=2>內容4,寫在這里……</font>','bisque',135,450)//以下程序用于將提示條顯示出來function show(x){if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){if (brows){ //如果瀏覽器是NSwith(link[x]){document.layers['linkex'].bgColor=bgcolor; //修改linkex這個layer的背景顏色document.layers['linkex'].document.writeln(msg); //用writeln方法寫入內容document.layers['linkex'].document.close(); //關閉文本流document.layers['linkex'].top=dtop; //調整位置document.layers['linkex'].left=dleft;}document.layers['linkex'].visibility="show"; //顯示這個層}else{ //否則(瀏覽器是IE)with(link[x]){ //取對應的提示信息linkex.innerHTML=msg; //用修改innerHTML屬性的方式顯示提示內容linkex.style.top=dtop; //調整上邊距linkex.style.left=dleft; //調整左邊距linkex.style.background=bgcolor; //改變背景顏色}linkex.style.visibility="visible"; //顯示提示條}}}//這個程序用于隱藏提示條function hide(){if ((bname=="Netscape" && bversion>=4) || (bname=="Microsoft Internet Explorer" && bversion>=4)){if (brows) //如果是NSdocument.layers['linkex'].visibility="hide"; //設定'hide'以隱藏層else //否則(是IE)linkex.style.visibility="hidden"; //利用'hidden'隱藏層}}//--></SCRIPT></HEAD><BODY><!--以下的div層用于IE顯示--><DIV id=linkex style="POSITION: absolute; VISIBILITY: hidden; width=200"></DIV><!--以下的layer層用于NS顯示--><LAYER name="linkex" visibility="hide"></LAYER><P align=center><A href="#" onmouseout=hide() onmouseover=show(0) target=main>[本站宗旨]</A><BR><BR><A href="#" onmouseout=hide() onmouseover=show(1) target=main>[本站論壇]</A><BR><BR><A href="#" onmouseout=hide() onmouseover=show(2) target=main>[本站欄目]</A><BR><BR><A href="#" onmouseout=hide() onmouseover=show(3) target=main>[關于本站]</A></BODY></HTML> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能顯示效果,請按Ctrl+F5刷新本頁,更多網頁代碼:<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></div>提示:可修改后代碼再運行!
上一篇 JQuery實例:offsetWidth 與 offsetHeight
下一篇 PHP 和 MySQL 開發的 8 個技巧
程序員人生,我編程,我富裕,記住wfuyu網,php教程,php學習,php手冊,CMS模版制作
聲明:本站大部分內容是作者原創,少部分收集于互聯網供大家一起學習,原版權很多不明,如有侵權請聯系本站,謝謝!
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有