JS实现横向拉伸动感伸缩菜单效果代码


Posted in Javascript onSeptember 04, 2015

本文实例讲述了JS实现横向拉伸动感伸缩菜单效果代码。分享给大家供大家参考。具体如下:

这是一款JS实现的纵向拉伸变横向拉伸,动感伸缩菜单,紧身排列的CSS菜单,可用在博客等重要的位置部分作菜单,学习JavaScript前端设计的也可以作为参考范例。

运行效果截图如下:

JS实现横向拉伸动感伸缩菜单效果代码

在线演示地址如下:

具体代码如下:

<!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>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
Jan 27 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
jQuery设置Cookie及删除Cookie实例分析
Apr 15 Javascript
websocket+node.js实现实时聊天系统问题咨询
May 17 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
vue计算属性及使用详解
Apr 02 Javascript
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
在vue中获取token,并将token写进header的方法
Sep 26 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
Sep 04 #Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 #Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 #Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 #Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 #Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 #Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 #Javascript
You might like
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
jquery获得下拉框值的代码
2011/08/13 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
JavaScript 生成唯一ID的几种方式
2021/02/19 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
对python requests发送json格式数据的实例详解
2018/12/19 Python
python连接mongodb集群方法详解
2020/02/13 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Selenium Webdriver元素定位的八种常用方式(小结)
2021/01/13 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
小学生红领巾广播稿
2014/01/21 职场文书
《在家里》教后反思
2014/03/01 职场文书
工作鉴定评语
2014/05/04 职场文书
同志主要表现材料
2014/08/21 职场文书
组工干部演讲稿
2014/09/02 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
保险公司增员口号
2015/12/25 职场文书
小学科学课教学反思
2016/02/23 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript
Python Matplotlib库实现画局部图
2021/11/17 Python