Rumah > Artikel > hujung hadapan web > JS CSS melaksanakan kemahiran effect_javascript pintu gelangsar mudah (menu gelongsor).

JS CSS melaksanakan kemahiran effect_javascript pintu gelangsar mudah (menu gelongsor).

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

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

Ini adalah menu pintu gelangsar dengan reka bentuk yang sangat ringkas Apabila tetikus diletakkan pada menu utama, kandungan di dalamnya akan berubah mengikut contoh, demonstrasi ini kod. Setiap langkah Terdapat ulasan, yang berguna untuk mempelajari JavaScript dan CSS, dan juga membuka jalan untuk anda menulis pintu gelangsar yang lebih cantik dan praktikal 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-jdhd-menu-style-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>
#tab_container1{width:310px;text-align:left;border:1px solid #cccccc;background:url() repeat-x top;}
.cls_tab_nav{height:24px;overflow:hidden;font-size:12px;background:url() repeat-x bottom; padding-left:10px;}
.cls_tab_nav ul{font-size:9pt;margin:0;padding:0;}
.cls_tab_nav_li{background:url() no-repeat -70px 0;width:70px;height:24px;line-height:24px;float:left;display:inline;overflow:hidden;text-align:center;cursor:pointer;}
.cls_tab_nav_li_first{font-weight:bolder;background-position:0px 0px;}
.cls_tab_nav_li a{text-decoration:none;color:#000000;font-size:12px;}
.cls_tab_body{border-top:none;min-height:175px;padding:10px;height:175px;}
.cls_div{display:none;font-size:14px;}
.cls_tab_nav_li_first a{color:#c80000;}
</style>
</head>
  <body> 
  <div id="tab_container1" >
 <div class="cls_tab_nav">
 <ul>
  <li class="cls_tab_nav_li cls_tab_nav_li_first"><a href="#">百货大楼</a></li>
  <li class="cls_tab_nav_li"><a href="#">八方购物</a></li>
  <li class="cls_tab_nav_li"><a href="#">商场三</a></li>
 </ul>
 </div>
 <div class="cls_tab_body">
 <div class="cls_div" style="display:block;">
 百货大楼
 </div>
 <div class="cls_div">八方购物</div>
 <div class="cls_div">商场三</div>
 </div>
</div>
</body> 
</html> 
<script type="text/javascript">
try{
 document.execCommand("BackgroundImageCache", false, true);
}catch(e){}
function $(element){
 if(arguments.length>1){
 for(var i=0,elements=[],length=arguments.length;i<length;i++)
  elements.push($(arguments[i]));
 return elements;
 }
 if(typeof element=="string")
 return document.getElementById(element);
 else
 return element;
}
var Class={
 create:function(){
 return function(){
  this.initialize.apply(this,arguments);
 } 
 }
}
Object.extend=function(destination,source){
 for(var property in source){
 destination[property]=source[property];
 }
 return destination;
}
var tabMenu=Class.create();
tabMenu.prototype={
 initialize:function(container,selfOpt,otherOpt){
 this.container=$(container);
  var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{});
 var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{});
 //用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象
 for(var i=0,length=this.container.childNodes.length,objs=[];i<length;i++){
  if(this.container.childNodes[i].nodeType==1)
  objs.push(this.container.childNodes[i]);
 }
 var tabArray=objs[0].getElementsByTagName("li");
 //用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象
 var divArray=new Array();
 for(i=0,length=objs[1].childNodes.length;i<length;i++){
  if(objs[1].childNodes[i].nodeType==1)
  divArray.push(objs[1].childNodes[i]);
 }
 for(i=0,length=tabArray.length;i<length;i++){
  tabArray[i].length=length;
  tabArray[i].index=i;
  tabArray[i].onmouseover=function(){
  //其它选项卡样式设置
  for(var j=0;j<this.length;j++){
   tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0";
   for(var property in selfOptions){
   tabArray[j].firstChild.style[property]=otherOptions[property];
   }
  }
  //当前选项卡样式
  this.style.backgroundPosition="0 0";
  for(var property in selfOptions){
   this.firstChild.style[property]=selfOptions[property];
  }
  //隐藏其它选项卡
  for(j=0;j<this.length;j++){
   divArray[j].style.display="none";
  }
  //显示当前选项卡
  divArray[this.index].style["display"]="block";
  }
 }
 }
}
var tab1=new tabMenu("tab_container1",{fontSize:"12px",color:"#c80000",fontWeight:"bolder"},{fontWeight:"normal",color:"#000000"});
</script>

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 menyedari kesan mengklik untuk muncul tetingkap lapisan Div (boleh ditutup dan diseret)_jqueryArtikel seterusnya：jQuery menyedari kesan mengklik untuk muncul tetingkap lapisan Div (boleh ditutup dan diseret)_jquery

Artikel berkaitan

Lihat lagi