JS implements horizontal stretching dynamic telescopic menu effect code

JS implements horizontal stretching dynamic telescopic menu effect code_javascript skills

WBOY

Release： 2016-05-16 15:40:52

Original

1649 people have browsed it

The example in this article describes the JS code to implement horizontal stretching dynamic telescopic menu effect. Share it with everyone for your reference. The details are as follows:

This is a JS implementation of vertical stretching to horizontal stretching, dynamic telescoping menu, and tightly arranged CSS menu. It can be used as a menu in important positions such as blogs. It can also be used as a reference example for those learning JavaScript front-end design.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-row-show-menu-style-codes/

The specific code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>有弹性的菜单</title>
<style>
*{ margin:0px; padding:0px;} body { background:#fff;} .naver{list-style-type:
none; width:700px; overflow:hidden; margin:100px auto 0;} .naver li{ width:100px;
height:50px; overflow:hidden; font-size:16px; text-align:center; cursor:
pointer; } .naver li a,.naver li a:hover{display: block;width:100px; height:50px;
line-height: 50px; color:#FFF; text-decoration: none; } .co1{ background:#649e37}
.co2{ background:#028fbc}
</style>
<script type="text/javascript">
  window.onload = function() {
   var oUl = document.getElementById("nav");
   var aLi = oUl.getElementsByTagName("li");
   var i = 0;
   for (i = 0; i < aLi.length; i++) {
    aLi[i].timer = null;
    aLi[i].speed = 0;
    aLi[i].onmouseover = function() {
     startMove(this, 250);
    };
    aLi[i].onmouseout = function() {
     startMove2(this, 100);
    };
   }
  };
  function startMove(obj, iTarget) {
   if (obj.timer) {
    clearInterval(obj.timer);
   }
   obj.timer = setInterval(function() {
    doMove(obj, iTarget);
   }, 30)
  };
  function doMove(obj, iTarget) {
   obj.speed += 3;
   if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) {
    clearInterval(obj.timer);
    obj.timer = null;
   }
   else {
    if (obj.offsetWidth + obj.speed >= iTarget) {
     obj.speed *= -0.7;
     obj.style.width = iTarget + "px";
    }
    else {
     obj.style.width = obj.offsetWidth + obj.speed + "px";
    }
   }
  };
  function startMove2(obj, iTarget) {
   if (obj.timer) {
    clearInterval(obj.timer);
   }
   obj.timer = setInterval(function() {
    doMove2(obj, iTarget);
   }, 30)
  };
  function doMove2(obj, iTarget) {
   obj.speed -= 3;
   if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) {
    clearInterval(obj.timer);
    obj.timer = null;
   }
   else {
    if (obj.offsetWidth + obj.speed <= iTarget) {
     obj.speed *= -0.7;
     obj.style.width = iTarget + "px";
    }
    else {
     obj.style.width = obj.offsetWidth + obj.speed + "px";
    }
   }
  };
</script>
</head>
<body>
 <ul id="nav" class="naver">
  <li class="co1">
   <a href="#">首页</a>
  </li>
  <li class="co2">
   <a href="#">爱好</a>
  </li>
  <li class="co1">
   <a href="#">作品</a>
  </li>
  <li class="co2">
   <a href="#">联系</a>
  </li>
  <li class="co1">
   <a href="#">博客</a>
  </li>
 </ul>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.