菜单抖动效果-JS特效-爱易网页

菜单抖动效果

日期：2014-05-18　浏览次数：20434 次

以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

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

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

菜单抖动效果

相关资料更多>

推荐阅读更多>