suchen

Heim  >  Artikel  >  Web-Frontend  >  JS CSS realisiert Yahoo-ähnliche alternative Fähigkeiten zum Schalten von Schiebetüren mit Effekt_Javascript

JS CSS realisiert Yahoo-ähnliche alternative Fähigkeiten zum Schalten von Schiebetüren mit Effekt_Javascript

WBOY
WBOYOriginal
2016-05-16 15:36:431138Durchsuche

Das Beispiel in diesem Artikel beschreibt die JS-CSS-Implementierung eines Yahoo-ähnlichen alternativen Schiebetür-Schalteffekts. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein Tab-Schiebeeffekt, der den speziellen Diensten von Yahoo nachempfunden ist. Er wurde verbessert und ist etwas Besonderes. Schauen Sie sich den Effekt an.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-css-f-yahoo-hdm-menu-demo/

Der spezifische Code lautet wie folgt: 

<!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>
<title>仿雅虎另类CSS滑动门切换</title>
<style type="text/css">
<!--
* { margin:0; padding:0 }
div, dl, dt, dd { display:inline-block; }
div, dl, dt, dd { display:block }
h2{ font: 800 12px/20px "宋体"; }
#tabs { border:1px solid #ccc; margin:40px; width:382px; padding:4px 0 }
#tabs div { padding:69px 4px 0px; position:relative; }
#tabs dt { text-align:center; font: 12px/60px "宋体"; }
#tabs dd { font: 12px/20px "宋体"; padding:10px; }
#tab1 dt { left: 4px; top: 4px }
#tab2 dt { left:130px; top:4px }
#tab3 dt { left:256px; top:4px }
#tab4 dt { left: 4px; top: 4px }
#tab5 dt { left:130px; top:4px }
#tab6 dt { left:256px; top:4px }
.close dt { height:60px; width:120px; background:#FAFAFA; position:absolute; border:1px solid #ccc }
.close dd { display:none }
.open dt { height:65px; width:120px; background:#EBEBEB; position:absolute; border:1px solid #ccc; border-bottom:none; }
.open dd { background:#EBEBEB; border:1px solid #ccc; }
-->
</style>
<script type="text/javascript">
window.onload = 
function(){
 alltabs = document.getElementById('tabs').getElementsByTagName('dl')
 for(i = 0; i < alltabs.length; i++){
  alltabs[i].className = "close"
  alltabs[i].onmouseover = function(){
   for(j = 0; j < alltabs.length; j++){
    alltabs[j].className = "close"
   }
   this.className = "open"
  }
 }
}
</script>
</head>
<body>
<div id="tabs">
<h2>·欢迎来到脚本之家</h2>
 <div>
 <dl id="tab1">
 <dt>今日更新</dt>
 <dd>1、今日更新的内容</dd>
 </dl>
 <dl id="tab2">
 <dt>今日排行</dt>
 <dd>2、今日排行的内容</dd>
 </dl>
 <dl id="tab3">
 <dt>今日推荐</dt>
 <dd>3、今日推荐的内容</dd>
 </dl>
 </div>
 <div>
 <dl id="tab4">
 <dt>最近下载</dt>
 <dd>4、最近下载的东西</dd>
 </dl>
 <dl id="tab5">
 <dt>脚本代码</dt>
 <dd>5、脚本代码的内容</dd>
 </dl>
 <dl id="tab6">
 <dt>网页特效</dt>
 <dd>6、精品网页特效的内容</dd>
 </dl>
 </div>
</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.

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：JS-Methode zum Ändern des Optionsattributs in den Fähigkeiten „select_javascript“.Nächster Artikel：JS-Methode zum Ändern des Optionsattributs in den Fähigkeiten „select_javascript“.

In Verbindung stehende Artikel

Mehr sehen