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 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
Vue 框架之动态绑定 css 样式实例分析
Nov 14 Javascript
vue开发环境配置跨域的方法步骤
Jan 16 Javascript
js实现简易计算器功能
Oct 18 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
php将会员数据导入到ucenter的代码
2010/07/18 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
session 加入redis的实现代码
2016/07/15 PHP
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
prototype Element学习笔记(篇一)
2008/10/26 Javascript
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
jquery单行文字向上滚动效果的实现代码
2014/09/05 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python继承和抽象类的实现方法
2015/01/14 Python
python处理二进制数据的方法
2015/06/03 Python
python实现RSA加密(解密)算法
2016/02/17 Python
深入理解Python中装饰器的用法
2016/06/28 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
对python3中pathlib库的Path类的使用详解
2018/10/14 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
Aosom西班牙:家具在线商店
2020/06/11 全球购物
一些PHP的面试题
2015/05/06 面试题
采购人员的个人自我评价
2014/01/16 职场文书
老公爱的承诺书
2014/03/31 职场文书
工地质量标语
2014/06/12 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis