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 相关文章推荐
JavaScript 拖拉缩放效果
Dec 10 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
vue项目中微信登录的实现操作
Sep 08 Javascript
Java 生成随机字符的示例代码
Jan 13 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
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
window.open的功能全解析
2006/10/10 Javascript
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
AngularJS中一般函数参数传递用法分析
2016/11/22 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
python异步任务队列示例
2014/04/01 Python
解读Python中degrees()方法的使用
2015/05/18 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
python datetime中strptime用法详解
2019/08/29 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
超级实用的8个Python列表技巧
2020/08/24 Python
python 8种必备的gui库
2020/08/27 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
市场营销毕业生自荐信
2013/11/23 职场文书
校园文化建设方案
2014/02/03 职场文书
护士毕业实习感言
2014/03/05 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
我为自己代言广告词
2014/03/18 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
淘宝好评语句大全
2014/12/31 职场文书
暂停营业通知
2015/04/25 职场文书
出生证明范本
2015/06/15 职场文书
python 调用js的四种方式
2021/04/11 Python