javascript实现超炫的向上滑行菜单实例


Posted in Javascript onAugust 03, 2015

本文实例讲述了javascript实现超炫的向上滑行菜单。分享给大家供大家参考。具体如下:

<!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 { margin:0; background:#66FF99; }
ul { padding-left:0; margin:0; }
li { list-style:none; }
#nav { height:40px; background:#900; margin-top:50px; }
#nav ul { width:240px; height:40px; margin:0 auto; }
#nav li {height:40px; width:240px;}
#nav a { float:left; width:240px;position:relative; height:40px; overflow:hidden; font-size:14px; color:#e0e03a; text-decoration:none; cursor:pointer; }
#nav strong { float:left;width:240px; }
#nav span { float:left;width:200px; padding:0 20px; height:40px; line-height:40px; background:#900; clear:both; white-space:nowrap;}
#nav .active,#nav .current span { background:#600; color:#fff; }
#nav .current .active { color:#e0e03a; }
</style>
<script> 
window.onload=function()
{
 var oDiv=document.getElementById('nav');
 var aStrong=oDiv.getElementsByTagName('strong');
 var aA=oDiv.getElementsByTagName('a');
 var iTarget=oDiv.getElementsByTagName('li')[0].offsetHeight;
 for(var i=0; i<aStrong.length; i++)
 {
  aA[i].style.width=aStrong[i].style.width=aStrong[i].getElementsByTagName('span')[0].offsetWidth+'px';
  aStrong[i].style.position='absolute';
  aStrong[i].style.top=aStrong[i].style.left=0;
  aStrong[i].onmouseover=function()
  {
   startMove(this, -iTarget);
  };
  aStrong[i].onmouseout=function()
  {
   startMove(this, 0);
  };
 }
};
function startMove(obj,target)
{
 clearInterval(obj.iTime);
 obj.iTime=setInterval(function(){
  if(obj.offsetTop==target)
  {
   clearInterval(obj.iTime);
  }
  else
  {
   var iSpeed=(target-obj.offsetTop)/4;
   iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
   obj.style.top=obj.offsetTop+iSpeed+'px';
  }
 }, 30);
}
</script>
</head>
<body>
<div id="nav">
 <ul>
  <li class="current">
   <a href="#">
    <strong>
     <span>首页</span>
     <span class="active">首页</span>
    </strong>
   </a>
  </li>
  <li>
   <a href="#">
    <strong>
     <span>前端开发课程</span>
     <span class="active">前端开发课程</span>
    </strong>
   </a>
  </li>
  <li>
   <a href="#">
    <strong>
     <span>妙味视频教程</span>
     <span class="active">妙味视频教程</span>
    </strong>
   </a>
  </li>
  <li>
   <a href="#">
    <strong>
     <span>周末班上课安排</span>
     <span class="active">周末班上课安排</span>
    </strong>
   </a>
  </li>
  <li>
   <a href="#">
    <strong>
     <span>结课标准</span>
     <span class="active">结课标准</span>
    </strong>
   </a>
  </li>
  <li>
   <a href="#">
    <strong>
     <span>联系妙味</span>
     <span class="active">联系妙味</span>
    </strong>
   </a>
  </li>
 </ul>
</div>
</body>
</html>

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

Javascript 相关文章推荐
javascript中的document.open()方法使用介绍
Oct 09 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 Javascript
js中top的作用深入剖析
Mar 04 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
JS实现焦点图轮播效果的方法详解
Dec 19 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
提高jQuery性能优化的技巧
Aug 03 #Javascript
jquery简单实现幻灯片的方法
Aug 03 #Javascript
JS拖拽插件实现步骤
Aug 03 #Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 #Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 #Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 #Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 #Javascript
You might like
点评山进PR-D3L三波段收音机
2021/03/02 无线电
SONY ICF-F10中波修复记
2021/03/02 无线电
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
python中异常捕获方法详解
2017/03/03 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
学习委员自我鉴定
2014/01/13 职场文书
《在家里》教后反思
2014/03/01 职场文书
超市创业计划书
2014/04/24 职场文书
企业诚信承诺书
2014/05/23 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
硕士学位论文评语
2014/12/31 职场文书
周年庆典答谢词
2015/01/20 职场文书
消防隐患整改通知书
2015/04/22 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
设置IIS Express并发数
2022/07/07 Servers