cari

Rumah >hujung hadapan web >tutorial js >Regangkan dan kecilkan kod menu yang dilaksanakan dalam kemahiran JavaScript_javascript

Regangkan dan kecilkan kod menu yang dilaksanakan dalam kemahiran JavaScript_javascript

WBOY
WBOYasal
2016-05-16 15:36:481061semak imbas

Contoh dalam artikel ini menerangkan kod menu regangan dan pengecutan yang dilaksanakan dalam JavaScript. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu regangan JavaScript sebenar Gerakkan tetikus untuk melihatnya. Apabila tetikus bergerak keluar dari item menu, latar belakang akan terbentang. Tiada pautan dalam menu Jika anda ingin menggunakannya, tambahkan sendiri dan cantikkan ia pasti cukup diperibadikan.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-zkss-menu-codes/

Kod khusus adalah seperti berikut: 

<html>
<head>
<title>真正的JavaScript伸展收缩型菜单</title>
<style type="text/css">
#con div{width:100px;margin:5px 0 5px 0;font-size:9pt;height:23px;color:white;}
</style>
<div id="con">
<div style="background-color:red">红色菜单</div>
<div style="background-color:green">绿色菜单 </div>
<div style="background-color:blue">蓝色</div>
<div style="background-color:yellow">黄色</div>
<div style="background-color:pink">这是什么色</div>
<div style="background-color:orange">桔色</div>
<div style="background-color:black">黑色超酷</div>
</div>
<script language="javascript">
function $(e){return document.getElementById(e);}
function roulMenu(e,maxW,minW){
 var divs = $(e).getElementsByTagName('div');
 for(var i=0;i<divs.length;i++){
 (function(){
 var tims,timss;
 divs[i].onmouseover=function(){
  var self = this;
  clearInterval(timss);
  tims=setInterval(function(){
   if(self.offsetWidth<maxW){
   self.style.width = self.offsetWidth + 5 + 'px';
   }else{
   clearInterval(tims);
   }
  },10);
  }
  divs[i].onmouseout=function(){
  var self = this;
  clearInterval(tims);
  timss=setInterval(function(){
   if(self.offsetWidth>minW){
   self.style.width = self.offsetWidth - 5 + 'px';
   }else{
   clearInterval(timss);
   }
  },10);
  }
 })();
 }
}
//使用方法
roulMenu('con',200,100);
</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：Kod kesan pintu gelangsar mudah dilaksanakan oleh JS meniru kemahiran Taobao_javascriptArtikel seterusnya：Kod kesan pintu gelangsar mudah dilaksanakan oleh JS meniru kemahiran Taobao_javascript

Artikel berkaitan

Lihat lagi