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 相关文章推荐
Javascript常考语句107条收集
Mar 09 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
Sep 22 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 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
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
javascript开发中因空格引发的错误
2010/11/08 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
2015/06/04 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python迭代用法实例教程
2014/09/08 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python tkinter控件布局项目实例
2019/11/04 Python
python实现小程序推送页面收录脚本
2020/04/20 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
诚信的演讲稿范文
2014/05/12 职场文书
诉前财产保全担保书
2014/05/20 职场文书
场地使用证明模板
2014/10/25 职场文书
优秀教师事迹材料
2014/12/15 职场文书
司机岗位职责
2015/02/04 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
理解python中装饰器的作用
2021/07/21 Python