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 prototype原型操作笔记
Dec 07 Javascript
javascript针对DOM的应用实例(一)
Apr 15 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
JS ES6多行字符串与连接字符串的表示方法
Apr 26 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
ES2020系列之空值合并运算符 '??'
Jul 22 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
Javascript !!的作用
2008/12/04 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
js判断是否是手机页面
2017/03/17 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
python pdb调试方法分享
2014/01/21 Python
python去除扩展名的实例讲解
2018/04/23 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
python和go语言的区别是什么
2020/07/20 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
面试后感谢信怎么写
2014/02/01 职场文书
公司董事长岗位职责
2014/06/08 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
大一新生期末自我评价
2014/09/12 职场文书
2014年医务科工作总结
2014/12/18 职场文书
乔迁新居祝福语
2019/11/04 职场文书
利用Python+OpenCV三步去除水印
2021/05/28 Python
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫
vue elementUI批量上传文件
2022/04/26 Vue.js