js实现tab选项卡导航菜单点击震动特效-网页编程网

当前位置：主页 >> 网页特效 >> 正文

js实现tab选项卡导航菜单点击震动特效

阅读：8729 输入：2016-12-08 10:01:10

<html>
<head>
<title>导航菜单震动效果</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.yourmother.net</div>
   <div class="contents"  id="content2">Products list:
    <br/>AKG K701
    <br/>abcdr HD650
    <br/>abcdr DT880
    <br/>abcdr</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">abcdr</div>
  </div>
 </div>
</body>
</html>

相关阅读: 纯js网页左下角漂浮导航菜单代码; 纯css实现顶部、底部的固定菜单源码; js实现可编辑的下拉框可在线编辑效果