cari

Rumah >hujung hadapan web >tutorial js >js css melaksanakan kesan menu menegak teks butang tiga dimensi

js css melaksanakan kesan menu menegak teks butang tiga dimensi

PHP中文网
PHP中文网asal
2017-06-05 14:26:502736semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan kesan menu menegak teks jenis butang tiga dimensi menggunakan js css. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini adalah menu menegak yang agak baik dengan kesan tiga dimensi Jangan fikir menu yang mempunyai kesan tiga dimensi itu sebenarnya adalah butang yang dihiasi dengan JavaScript kod. Apabila tetikus diletakkan, akan terdapat kesan teks tiga dimensi yang jelas, yang boleh disusun secara menegak atau ditukar kepada mendatar.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>有立体感的按钮式文字菜单，竖排</TITLE>
</HEAD>
<BODY>
<STYLE type=text/css>A:link {
 TEXT-DECORATION: none
}
A:visited {
 TEXT-DECORATION: none
}
A:active {
 TEXT-DECORATION: none
}
A:hover {
 TEXT-DECORATION: none
}
.up {
 BORDER-RIGHT: #711200 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: white 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 9pt; PADDING-BOTTOM: 1px; BORDER-LEFT: white 1px solid; COLOR: #ff0000; PADDING-TOP: 1px; BORDER-BOTTOM: #711200 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #eadfd0
}
</STYLE>
<SCRIPT language=JavaScript>
<!-- IE and NS6 Menu Button script kurt.grigg@virgin.net
if (!document.layers){
// Choose size and colours here!
Width=100;
Font=&#39;Verdana&#39;;
FontSize=9;
AFontColor=&#39;#000000&#39;;
BFontColor=&#39;red&#39;;
CFontColor=&#39;#ffffff&#39;;
down="#6699cc";
FontWeight=&#39;normal&#39;; //normal or bold!
BackGround=&#39;#99ccff&#39;; //Same as your body bgcolor!
BorderDepth=2;
BorderLight=&#39;#FFFFFF&#39;;
BorderShad=&#39;#000000&#39;;
//Nothing needs altering past here!!!!!!!!!!!!!!!!!!!!!!
function On(id){
with(id.style){
color=BFontColor;
borderTopColor=BorderLight;
borderLeftColor=BorderLight;
borderRightColor=BorderShad;
borderBottomColor=BorderShad;
}
}
function Off(id){
with(id.style){
color=AFontColor;
borderTopColor=BackGround;
borderLeftColor=BackGround;
borderRightColor=BackGround;
borderBottomColor=BackGround;
background=BackGround;
}
}
function Down(id){
with(id.style){
color=CFontColor;
borderTopColor=BorderShad;
borderLeftColor=BorderShad;
borderRightColor=BorderLight;
borderBottomColor=BorderLight;
background=down;
}
}
function Link(Url,Txt,target){
document.write("<a href=&#39;"+Url+"&#39; target=&#39;"+target+"&#39;>"
+"<p style=&#39;position:relative;"
+"width:"+Width+"px;height:"+FontSize+"px;"
+"border-width:"+BorderDepth+"px;"
+"border-color:"+BackGround+";"
+"border-style:solid;"
+"padding:"+FontSize/4.5+"pt;"
+"background:"+BackGround+";"
+"font-family:"+Font+";"
+"font-size:"+FontSize+"pt;"
+"line-height:"+FontSize*1.2+"pt;"
+"font-weight:"+FontWeight+";"
+"text-align:left;"
+"color:"+AFontColor+";"
+"margin-top:2px;"
+"cursor:hand&#39;"
+"onMouseOver=&#39;javascript:On(this)&#39;" 
+"onMouseOut=&#39;javascript:Off(this)&#39;" 
+"onMouseDown=&#39;javascript:Down(this)&#39;>"
+Txt+"</p></a>");
}
}
function Temp(){
alert("TEST");
}
//-->
</SCRIPT>
<!-- End Menu Buttons Part:1 -->
<!-- Menu Buttons Part:2 Paste in Body where needed -->
<SCRIPT language=JavaScript>
<!-- 
if (!document.layers){
if (document.getElementById&&!document.all){
document.write("<p style=&#39;position:relative&#39;>"
+"<table border=&#39;0&#39; cellpadding=&#39;0&#39; cellspacing=&#39;0&#39;>"
+"<tr><td valign=&#39;top&#39;>");
}
Link(&#39;http://www.baidu.com&#39;,&#39;百度一下&#39;,&#39;_blank&#39;);
Link(&#39;http://www.yahoo.com&#39;,&#39;Yahoo&#39;,&#39;_blank&#39;);
Link(&#39;http://www.google.com&#39;,&#39;Google&#39;,&#39;_blank&#39;);
Link(&#39;http://www.hongen.com&#39;,&#39;洪恩在线&#39;,&#39;_blank&#39;);
Link(&#39;http://www.163.com&#39;,&#39;网易&#39;,&#39;main&#39;);
if (document.getElementById&&!document.all){
document.write("</td></tr></table></p>");
}
}
//-->
</SCRIPT>
</BODY>
</HTML>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Ringkasan kaedah yang biasa digunakan dalam Jquery_jqueryArtikel seterusnya：Ringkasan kaedah yang biasa digunakan dalam Jquery_jquery

Artikel berkaitan

Lihat lagi