Regangkan dan kecilkan kod menu yang dilaksanakan dalam kemahiran JavaScript

Regangkan dan kecilkan kod menu yang dilaksanakan dalam kemahiran JavaScript_javascript

WBOY

Lepaskan： 2016-05-16 15:36:48

asal

1039 orang telah melayarinya

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>

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan JavaScript semua orang.