<!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 name="author" content="郭菊锋,702004176@qq.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可伸缩的导航菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 14px;
}

a {
color: #333;
text-decoration: none
}

ul {
list-style: none;
height: 30px;
border-bottom: 5px solid #F60;
margin-top: 20px;
padding-left: 50px;
}

ul li {
float: left
}

ul li a {
display: block;
height: 30px;
text-align: center;
line-height: 30px;
width: 120px;
background: #efefef;
margin-left: 1px;
}

a.on,
a:hover {
background: #F60;
color: #fff;
}
</style>
<script>
window.onload = function() {
var aA = document.getElementsByTagName('a');
for(var i = 0; i < aA.length; i++) {
aA[i].onmouseover = function() {
var This = this;
clearInterval(This.time);//一开始要清楚定时器！！删了一下试试还是可以的呀。
This.time = setInterval(function() {
This.style.width = This.offsetWidth + 8 + "px";
if(This.offsetWidth >= 160)//这里，只有一行代码，所以不加花括号也是可以的。
clearInterval(This.time);
}, 30)
}
aA[i].onmouseout = function() {//和over时的效果一样，就是缩回来罢了
clearInterval(this.time);
var This = this;
this.time = setInterval(function() {
This.style.width = This.offsetWidth - 8 + "px";
if(This.offsetWidth <= 120) {//offsetWidth还有这个妙用，这的是元素的实际宽度吗？
This.style.width = '120px';
clearInterval(This.time);
}
}, 30)
}
}
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!--调用jq-->
<!--<script>
// jq的制作方法
$(function() { //$()==js里面的：window.onload = function(){};让页面加载完成之后再进行调用函数。
$('a').hover(
//$('x')选择器，选择标签是x的，括号里的引号里添加的是标签名
//hover方法，表示鼠标经过的时候的效果
//下设两个函数，一个鼠标移入动作，一个鼠标移出动作。
function() {
$(this).stop().animate({
"width": "160px"
}, 200); //jq自带的animate动画效果
},
function() {
$(this).stop().animate({
"width": "120px"
}, 200);
}

)

})
</script>-->
</head>

<body>
<ul>
<li>
<a class="on" href="#">首　　页</a>
</li>
<li>
<a href="#">新闻快讯</a>
</li>
<li>
<a href="#">产品展示</a>
</li>
<li>
<a href="#">售后服务</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
<p>来自慕课网教程
<a>http://www.imooc.com/video/93</a>
</p>
</body>

原生js代码
 <script>

             window.onload = function() {

                 var aA = document.getElementsByTagName('a');

                 for(var i = 0; i < aA.length; i++) {

                     aA[i].onmouseover = function() {

                         var This = this;

                         clearInterval(This.time);

                         This.time = setInterval(function() {

                             This.style.width = This.offsetWidth + 8 + "px";

                             if(This.offsetWidth >= 160)

                                 clearInterval(This.time);

                         }, 30)

                     }

                     aA[i].onmouseout = function() {

                         clearInterval(this.time);

                         var This = this;

                         this.time = setInterval(function() {

                             This.style.width = This.offsetWidth - 8 + "px";

                             if(This.offsetWidth <= 120) {

                                 This.style.width = '120px';

                                 clearInterval(This.time);

                             }

                         }, 30)

                     }

                 }

             }

         </script>

</html>

JS-制作可伸缩的水平菜单栏的更多相关文章

  1. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  2. 基于node.js制作爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...

  3. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  4. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  5. JS制作图片切换

    <!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...

  6. 使用Vue.js制作仿Metronic高级表格（一）静态设计

    Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...

  7. 使用 原生js 制作插件 (javaScript音乐播放器)

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. D3.js 制作中国地图 .net 公共基础类

    D3.js 制作中国地图 from:  http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...

  9. 用js制作一个计算器

    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. 新玩具---Amazon Kindle PaperWhite 2

    自从将闲置了一段时间的K3 Keyboard 3G送人后,就一直用Nexus7平板上装Kindle程序来读书,用着也挺好,没有出现很多人说的费眼问题,说来也奇怪上学毕业之后,一直从事编程相关的工作有七 ...

  2. ASP.NET mvc异常处理的方法

    第一种:全局异常处理 1.首先常见保存异常的类(就是将异常信息写入到文件中去) public class LogManager { private string logFilePath = strin ...

  3. 流量工程 traffic engineering (TE)

    什么是流量工程 流量工程是指根据各种数据业务流量的特性选取传输路径的处理过程.流量工程用于平衡网络中的不同交换机.路由器以及链路之间的负载. [编辑] 流量工程的内容 流量工程在复杂的网络环境中,控制 ...

  4. Day One(Beta)

    站立式会议 站立式会议内容总结 331 今天:自己摸索了BaseAdapter删除元素的三种方式更新效率逐步上升 明天:学习webkit的webview的使用 442 今天:书籍评价界面,计划删除功能 ...

  5. 用一条sql语句显示数据百分比并加百分号

    来源于:http://neil-han.iteye.com/blog/1948124 求数值所占比重 关键点:(round(t1.cnt/t2.totalCount*100,2))||'%'

  6. PCA算法是怎么跟协方差矩阵/特征值/特征向量勾搭起来的?

    PCA, Principle Component Analysis, 主成份分析, 是使用最广泛的降维算法. ...... (关于PCA的算法步骤和应用场景随便一搜就能找到了, 所以这里就不说了. ) ...

  7. mysql-查询一天，一周，一月，一年，以及mysql的基本日期函数

    查询一天: select * from table where to_days(column_time) = to_days(now()); select * from table where dat ...

  8. PV、UV、IP之间的区别与联系

    先看图: 1.什么是PV值 PV(page view)即页面浏览量或点击量,是衡量一个网站或网页用户访问量.具体的说,PV值就是所有访问者在24小时(0点到24点)内看了某个网站多少个页面或某个网页多 ...

  9. ASP.NET MVC 4 异步加载控制器

    ASP.NET 4 Developer preview中的异步操纵器 在放弃了对.NET 3的支持之后, ASP.NET MVC 4 彻底拥抱了Task类库, 你不需求再蛋疼的给每个Action写两个 ...

  10. 70.Android开发知识点总结

    转载:http://blog.csdn.net/worst_hacker/article/details/49867043     1.android之wifi开发 http://blog.csdn. ...