suchen

Heim  >  Artikel  >  Web-Frontend  >  js css implementiert einen dreidimensionalen vertikalen Menüeffekt für Schaltflächentext

js css implementiert einen dreidimensionalen vertikalen Menüeffekt für Schaltflächentext

PHP中文网
PHP中文网Original
2017-06-05 14:26:502697Durchsuche

Das Beispiel in diesem Artikel beschreibt die Implementierung eines dreidimensionalen vertikalen Menüeffekts mit schaltflächenartigem Text mithilfe von js css. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Dies ist ein relativ gutes vertikales Menü mit dreidimensionalem Effekt. Denken Sie nicht, dass es sich bei diesen Menüs mit dreidimensionalen Effekten um Schaltflächen handelt, die mit JavaScript dekoriert sind Wenn die Maus platziert wird, entsteht ein offensichtlicher dreidimensionaler Texteffekt, der vertikal angeordnet oder in horizontal geändert werden kann.

Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code lautet wie folgt: 

<!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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung häufig verwendeter Methoden in Jquery_jqueryNächster Artikel：Zusammenfassung häufig verwendeter Methoden in Jquery_jquery

In Verbindung stehende Artikel

Mehr sehen