Rumah > Artikel > hujung hadapan web > Javascript menyedari kesan menukar kandungan yang sepadan di bawah selepas tetikus diletakkan_javascript kemahiran

Javascript menyedari kesan menukar kandungan yang sepadan di bawah selepas tetikus diletakkan_javascript kemahiran

WBOYasal: 2016-05-16 15:46:391077semak imbas

Artikel ini menerangkan contoh JavaScript yang menyedari kesan menukar kandungan yang sepadan di bawah apabila tetikus diletakkan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini adalah kesan menu yang agak biasa di Internet Apabila tetikus diletakkan, kandungan yang sepadan akan bertukar, dengan reka letak grafik dan teks. Dari segi teknologi, JS dan CSS digabungkan untuk mencapainya Anda boleh mengekstrak bahagian JS kod secara berasingan dan menyimpannya sebagai fail JS, dan kemudian memperkenalkannya ke dalam halaman, yang menjadikan kod halaman utama lebih mudah. Kesan ini biasanya diuji di bawah IE, Firefox dan pelayar lain.

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Kod khusus adalah seperti berikut:

<html>
<head>
<title>鼠标放上后下面的内容切换</title>
<style type="text/css">
*{margin:0;padding:0;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul{list-style:none;}
.menuA{background:#333;float:left;padding-top:2px;width:100%;}
.menuA li{float:left;}
.menuA li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;}
.menuA .check a {background:#fff;color:#000;}
.menuB{clear:both;border:2px solid #000;border-top:none;background:#fff;}
.menuB ul{display:none;padding:15px;line-height:180%;}
</style>
</head>
<body>
<div class="menuA">
<ul>
   <li class="check"><a href="#">国际时事</a></li>
   <li><a href="#">精美壁纸</a></li>
   <li><a href="#">大国关系</a></li>
   <li><a href="#">欧美风情</a></li>
</ul>
</div>
<div class="menuB">
 <ul style="display:block;" class="one">
 <li><a href="#">国际时事</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">精美壁纸</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">大国关系</a></li>
 </ul>
 <ul class="one">
 <li><a href="#">欧美风情</a></li>
 </ul>
</div>
<script>
function $_class(name){
 var elements = document.getElementsByTagName("*");
 for(s=0;s<elements.length;s++){
 if(elements[s].className==name){
  return elements[s];
 }
 }
}
var tabList = $_class("menuA").getElementsByTagName("li")
 tabCon = $_class("menuB").getElementsByTagName("ul");
for(i=0;i<tabList.length;i++){
 (function(){
 var t = i;
 tabList[t].onmouseover = function(){
  for(o=0;o<tabCon.length;o++){
  tabCon[o].style.display = "none";
  tabList[o].className = "";
  if(t==o){
   this.className = "check";
   tabCon[o].style.display = "block";
  }
  }
 }
 })()
}
</script>
</body>
</html>

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

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：Kaedah Javascript untuk mencapai kemahiran effect_javascript bunga api latar belakang halaman webArtikel seterusnya：Kaedah Javascript untuk mencapai kemahiran effect_javascript bunga api latar belakang halaman web

Artikel berkaitan

Lihat lagi