search

Home >Web Front-end >JS Tutorial >Stretch and shrink menu code implemented in JavaScript_javascript skills

Stretch and shrink menu code implemented in JavaScript_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:36:481054browse

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>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Simple sliding door effect code implemented by JS imitating Taobao_javascript skillsNext article：Simple sliding door effect code implemented by JS imitating Taobao_javascript skills

Related articles

See more