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 相关文章推荐
jquery last-child 列表最后一项的样式
Jan 22 Javascript
javascript实现密码强度显示
Mar 18 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 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
德生S2000电路分析
2021/03/02 无线电
php中iconv函数使用方法
2008/05/24 PHP
跟我学Laravel之请求与输入
2014/10/15 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
可输入的下拉框
2006/06/19 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
python实现解数独程序代码
2017/04/12 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
酒店总经理欢迎词
2014/01/15 职场文书
如何写好建议书
2014/03/13 职场文书
双方协议书
2014/04/22 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
责任书格式
2019/04/18 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Pytorch DataLoader shuffle验证方式
2021/06/02 Python