<!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. VC维含义

    VC维含义的个人理解 有关于VC维可以在很多机器学习的理论中见到,它是一个重要的概念.在读<神经网络原理>的时候对一个实例不是很明白,通过这段时间观看斯坦福的机器学习公开课及相关补充材料, ...

  2. windows设置开机启动项

    一.windows下设置开机启动有如下方法 1 注册表启动项目RUN 2 计划任务,在"windows管理">"计划任务管理器"中新建任务,在操作栏指定要 ...

  3. Adobe Flash builder 4.6破解教程(以win764bit为例)

    首先安装软件至默认路径: C:\Program Files(X86)\Adobe下 然后: 1.C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.6 ...

  4. UITextView的使用详解

    //初始化并定义大小 UITextView *textview = [[UITextView alloc] initWithFrame:CGRectMake(20, 10, 280, 30)]; te ...

  5. PHP配置详解

    [PHP] ;;;;;;;;;;;;;;;;;;; ; About php.ini ; ;;;;;;;;;;;;;;;;;;; ; This file controls many aspects of ...

  6. android开发------响应用户事件

    今天的内容有点简单,不难,就是为按钮添加onClick事件.  新知识点: Intent类的简单使用 startActivity方法 一般事件都由按钮触发,现在我们要实现的是当用户点击按钮的时候,启动 ...

  7. 模拟发送http请求

    1.httpie 2.postman:Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件. 3.fiddler

  8. [转]实体类（VO，DO，DTO）的划分

    原文地址:http://blog.sina.com.cn/s/blog_7a4cdec80100wkyh.html 经常会接触到VO,DO,DTO的概念,本文从领域建模中的实体划分和项目中的实际应用情 ...

  9. [转]Java Web基础——Action+Service +Dao三层的功能划分

    原文地址:http://blog.csdn.net/inter_peng/article/details/41021727 参考来源:http://www.xuebuyuan.com/2153333. ...

  10. JPA Hibernate应用实例

    1.配置文件:persistence.xml <?xml version="1.0" encoding="UTF-8"?> <persiste ...