Stretch and shrink menu code implemented in JavaScript_javascript skills-JS Tutorial-php.cn

Stretch and shrink menu code implemented in JavaScript_javascript skills

WBOY

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

Original

1039 people have browsed it

The example in this article describes the stretch and shrink menu code implemented in JavaScript. Share it with everyone for your reference. The details are as follows:

This is a real JavaScript stretch menu. Move the mouse over to take a look. Isn’t it cool? When the mouse moves out of the menu item, the background will stretch. There are no links in the menu. If you want to use it, add it yourself and beautify it. It will definitely be personalized enough.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

<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>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming.