菜单抖动效果

稿源：互联网 2022-04-09 15:16:20 点击： 2015 撤稿纠错

点击菜单后，有稍微抖动的效果。

以下讨论的是和特效菜单相关的菜单抖动效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html><br><head><br><title>test</title><br><style type="text/css"><br> #wrapper{<br>  position:relative;<br>  width:720px;<br>  height:500px;<br>  left:50%;<br>  margin-left:-360px;<br>  border:solid black 1px;<br> }<br> #d1,#d2,#d3,#d4,#d5,#d6{<br>  position:absolute;<br>  border:1px black solid;<br>  margin-left:0;<br>  margin-right:auto;<br>  width:100px;<br>  text-align:center;<br> }<br> #d1{<br>  margin:5px;<br> }<br> #d2{<br>  top:20px;<br>  margin:10px 0 0 5px;<br> }<br> #d3{<br>  top:40px;<br>  margin:15px 0 0 5px;<br> }<br> #d4{<br>  top:60px;<br>  margin:20px 0 0 5px;<br> }<br> #d5{<br>  top:80px;<br>  margin:25px 0 0 5px;<br> }<br> #d6{<br>  top:100px;<br>  margin:30px 0 0 5px;<br> }<br> #content{<br>  position:absolute;<br>  border:1px solid black;<br>  width:605px;<br>  height:490px;<br>  left:110px;<br>  top:5px;<br> }<br> .contents{<br>  padding:10px;<br>  display:none;<br> }<br> #content1{<br>  display:block;<br> }<br></style><br><script type="text/javascript"><br> var currunt=0<br> function dis(menu_number){<br>  currunt=menu_number;<br>  width=30;<br>  speed=5;<br>  positionX=0;<br>  preSpeed=0;<br>  flag=1;<br>  document.getElementById("content"+menu_number).style.display="block";<br>  hidRest(menu_number);<br> }<br> function hidRest(menu_clicked){<br>  var MENU_LENGTH=6;<br>  for(i=1;i<=MENU_LENGTH;i++){<br>   if(i!=menu_clicked){<br>    document.getElementById("content"+i).style.display="none";<br>   }<br>  }<br> }<br> function shake(){<br>  if(flag==1){<br>   speed=1-speed*0.8<br>   positionX+=speed;<br>   positionX-=preSpeed;<br>   document.getElementById("d"+currunt).style.left=positionX<br>   if(Math.abs(speed)<1.0){<br>    document.getElementById("d"+currunt).style.left=0;<br>    flag=0;<br>   }<br>   preSpeed=speed;<br>   setTimeout("shake()",50)<br>  }<br> }<br></script><br></head><br><body><br> <div id="wrapper"><br>  <div id="d1" onmousedown="dis(1);shake()">Home</div><br>  <div id="d2" onmousedown="dis(2);shake()">Products</div><br>  <div id="d3" onmousedown="dis(3);shake()">Download</div><br>  <div id="d4" onmousedown="dis(4);shake()">News</div><br>  <div id="d5" onmousedown="dis(5);shake()">Support</div><br>  <div id="d6" onmousedown="dis(6);shake()">About</div><br>  <div id="content"><br>   <div class="contents"  id="content1">Home page:<br/>www.google.com</div><br>   <div class="contents"  id="content2">Products list:<br>    <br/>AKG K701<br>    <br/>Sennheiser HD650<br>    <br/>beyerdynamic DT880<br>    <br/>Sony SA5000</div><br>   <div class="contents"  id="content3">Download list:<br>    <br/>realtek_alc880_182_xp.zip<br>    <br/>Analog_soundmaxhd_drv510014310.rar<br>    <br/>RTL8168_565808142006.zip<br>    <br/>realtek_hd_205_xp.zip<br>    <br/>8-8_xp32_dd_67975.exe</div><br>   <div class="contents"  id="content4">My first JS practice!</div><br>   <div class="contents"  id="content5">Support Information:<br/>TEL:8888888</div><br>   <div class="contents"  id="content6">JS demo 1.0 by iifksp</div><br>  </div><br>  <br> </div><br></body><br></html></font><br><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于菜单抖动效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20081201380.shtml方便下次再访问哦。

·上一篇： js模拟下拉菜单
·下一篇： 测试一个简单实用的下拉菜单

菜单抖动效果

文章分类LIST >>返回首页

最新游戏

最新新闻