导航菜单震动效果-JS特效-爱易网页

导航菜单震动效果

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

以下是程序代码

<html>
<head>
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>导航菜单震动效果，sky整理收集。</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);
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 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";
   }
  }
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 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)
  }
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

 <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:
www.zzjs.net</div>
   <div class="contents"  id="content2">Products list:
    
AKG K701
    
Sennheiser HD650
    
beyerdynamic DT880
    
Sony SA5000</div>
   <div class="contents"  id="content3">Download list:
    
realtek_alc880_182_xp.zip
    
Analog_soundmaxhd_drv510014310.rar
    
RTL8168_565808142006.zip
    
realtek_hd_205_xp.zip
    
8-8_xp32_dd_67975.exe</div>
   <div class="contents"  id="content4">My first JS practice!</div>
   <div class="contents"  id="content5">Support Information:
TEL:8888888</div>
   <div class="contents"  id="content6">JS demo 1.0 by iifksp</div>
  </div>
 </div>
</body>
</html>

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

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

导航菜单震动效果

相关资料更多>

推荐阅读更多>