Rumah > Artikel > hujung hadapan web > JS CSS melaksanakan kemahiran kod_javascript kesan pintu gelangsar yang mudah

JS CSS melaksanakan kemahiran kod_javascript kesan pintu gelangsar yang mudah

WBOYasal: 2016-05-16 15:38:111516semak imbas

Contoh dalam artikel ini menerangkan cara melaksanakan kod kesan pintu gelangsar mudah menggunakan JS CSS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Setelah membaca banyak maklumat tentang pintu gelangsar dan menu gelongsor, saya akhirnya menghasilkan pintu gelangsar yang baik Walaupun ia tidak kelihatan sangat baik, ia serasi dengan Firefox, jangan ketawa. Saya akan meminta anda lebih banyak pada masa hadapan.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-css-simple-hdtx-demo-codes/

Kod khusus adalah seperti berikut:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>学习练手写下个简易的滑动门</title>
<style>
*{
margin:0px;
padding:0px;
font-size:9pt;
}
#tab{width:400px;
height:auto;
margin:0 auto;
}
ul{list-style:none; margin-left:20px;}
li{ float:left;height:30px;background:url(15.jpg);margin:0 5px;text-align:center;line-height:30px;color:#293863;width:60px; position:relative;bottom:-3px;}/*margin;那里调节各个li之间的距离,position是保证下边框的出现*/
.dise{display:block;}
.undise{display:none;}
.fff{background:
url(images/tr.jpg);}
#all{clear:left; width:400px;}
#all div{width:400px;background-color:#F2F5FA;text-align:left;line-height:20px; height:200px;
border:1px #CCCDCD solid; }/*一定要设border*/
}
</style>
</head>
<script language="javascript">
function g(o){return document.getElementById(o);}
function showdiv(i){
for(j=1;j<=3;j++){
g("div"+j).className="undise"//将三个都设为undise，以便将来可以设置显示的那个；
g("li"+j).className=""//消除原来所有li的属性
}
g("div"+i).className="dise"
g("li"+i).className="fff"
}
function showdiv1(i){
for(j=4;j<=6;j++){
g("div"+j).className="undise"//将三个都设为undise，以便将来可以设置显示的那个；
g("li"+j).className=""//消除原来所有li的属性
}
g("div"+i).className="dise"
g("li"+i).className="fff"
}
</script>
<body>
 <div div id="tab">
  <ul>
  <li id="li1" class="fff"><span onmouseover="showdiv(1)">世界的中国</span></li>
  <li id="li2"><span onmouseover="showdiv(2)">网页特效</span></li>
  <li id="li3"><span href="#" onmouseover="showdiv(3)">脚本代码</span></li>
  </ul>
 <div id="all">
  <div id="div1" class="dise">学习型源码下载站。</div>
  <div id="div2" class="undise">精选网页特效，应有尽有~</div>
  <div id="div3" class="undise">高质量脚本代码资源随您下载！</div> 
 </div>
 </div>
</body>
</html>

Saya harap artikel ini akan membantu 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：jQuery EasyUI menyedari kesan menghitamkan menu_jquery klik kananArtikel seterusnya：jQuery EasyUI menyedari kesan menghitamkan menu_jquery klik kanan

Artikel berkaitan

Lihat lagi