Das Beispiel in diesem Artikel beschreibt den in JavaScript implementierten Menücode zum Dehnen und Verkleinern. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Das ist ein echtes JavaScript-Stretch-Menü. Bewegen Sie die Maus darüber, um einen Blick darauf zu werfen. Wenn die Maus den Menüpunkt verlässt, wird der Hintergrund gestreckt. Es gibt keine Links im Menü. Wenn Sie es verwenden möchten, fügen Sie es selbst hinzu und verschönern Sie es.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/js-zkss-menu-codes/
Der spezifische Code lautet wie folgt:
<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> Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
