JS实现弹性菜单效果代码


Posted in Javascript onSeptember 07, 2015

本文实例讲述了JS实现弹性菜单效果代码。分享给大家供大家参考。具体如下:

这是一款JavaScript+CSS实现弹性菜单——纯属自己写着练习,无使用第三方的类库,我觉得是值得学习前端设计的朋友参考的,有兴趣的朋友可以把弹性的菜单背景换成一个漂亮的图片,这样更漂亮了。

运行效果截图如下:

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=utf-8" />
<title>Js实现菜单弹性菜单</title>
<style type="text/css">
body, ul, ol, dl, dt, dd, h1, h2, h3, h4, h5, p, form { padding: 0; margin: 0; }
li { list-style: none; }
img { border: 0; }
body { font-family: Arial; background: #fff url() repeat-x; }
#header { width: 960px; height: 107px; margin: 0 auto 12px; position: relative; }
#header h1 { padding-top: 15px; float: left; }
#header ul { height: 44px; position: absolute; right: 0; bottom: 0; }
#header .normal, #header .active { float: left; width: 88px; height: 44px; position: relative; z-index: 1; }
#header .normal a, #header .active a { float: left; width: 88px; height: 44px; line-height: 44px; text-align: center; text-decoration: none; font-size: 14px; font-weight: bold; }
#header .active a { color: #fff; }
#header .normal a { color: #999; }
#btn_bg { width: 88px; height: 44px; background: #fb2347 url(); position: absolute; overflow:hidden; left: 608px; bottom: 0; z-index: 2; }
#btn_bg ul { width: 528px; left:-176px; position:absolute; }
</style>
<script type="text/javascript">
var away;
window.onload=function()
{
 var odiv=document.getElementById("btn_bg");
 var oul=odiv.getElementsByTagName("ul")[0];
 var oli=document.getElementById("header").getElementsByTagName("ul")[0].getElementsByTagName("li");
 var i=0;
 for(i=0;i<oli.length;i++)
 {
  oli[i].index=i;
  oli[i].onmouseover=function()
  {
   away=432+88*this.index;
   menuInterval(); 
  };
 };
}
var timer=null;
function menuInterval()
{
 if(timer)
 {
  clearInterval(timer);
 }
 timer=setInterval(menuMove, 30);
}
var step=0;
var l=0;
function menuMove()
{
 var odiv=document.getElementById("btn_bg");
 var oul=odiv.getElementsByTagName("ul")[0];
  step+=(away-odiv.offsetLeft)/10;
  step=step*0.78;
 l=parseInt(odiv.offsetLeft+step);
 odiv.style.left=l+"px";
 oul.style.left=-l+432+"px";;
}
</script>
</head>
<body>
<div id="header">
 <ul>
 <li class="normal"><a href="#">首页</a></li>
 <li class="normal"><a href="#">叶子课程</a></li>
 <li class="normal"><a href="#">叶子资源</a></li>
 <li class="normal"><a href="#">留言</a></li>
 <li class="normal"><a href="#">叶子博客</a></li>
 <li class="normal"><a href="#">联系叶子</a></li>
 </ul>
 <div id="btn_bg">
  <ul>
  <li class="active"><a href="#">首页</a></li>
  <li class="active"><a href="#">叶子课程</a></li>
  <li class="active"><a href="#">叶子资源</a></li>
  <li class="active"><a href="#">留言</a></li>
  <li class="active"><a href="#">叶子博客</a></li>
  <li class="active"><a href="#">联系叶子</a></li>
  </ul>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
JS声明变量背后的编译原理剖析
Dec 28 Javascript
javascript中的delete使用详解
Apr 11 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 #Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 #Javascript
关于JS中prototype的理解
Sep 07 #Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 #Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 #Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 #Javascript
js调用百度地图及调用百度地图的搜索功能
Sep 07 #Javascript
You might like
基于mysql的论坛(4)
2006/10/09 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
canvas的神奇用法
2017/02/03 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
Python中zfill()方法的使用教程
2015/05/20 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python反转序列的方法实例分析
2018/03/21 Python
python中的subprocess.Popen()使用详解
2019/12/25 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
Java中实现多态的机制
2015/08/09 面试题
国旗下演讲稿
2014/05/08 职场文书
学校2014年度工作总结
2014/12/06 职场文书
党员转正党支部意见
2015/06/02 职场文书