JS-制作可伸缩的水平菜单栏

简介: 可伸缩的导航菜单 * { margin: 0; padding: 0; font-size: 14px; } a { color: #333; text-decoration: none } ul { list-st...
 

<!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代码
 1 <script>
 2             window.onload = function() {
 3                 var aA = document.getElementsByTagName('a');
 4                 for(var i = 0; i < aA.length; i++) {
 5                     aA[i].onmouseover = function() {
 6                         var This = this;
 7                         clearInterval(This.time);
 8                         This.time = setInterval(function() {
 9                             This.style.width = This.offsetWidth + 8 + "px";
10                             if(This.offsetWidth >= 160)
11                                 clearInterval(This.time);
12                         }, 30)
13                     }
14                     aA[i].onmouseout = function() {
15                         clearInterval(this.time);
16                         var This = this;
17                         this.time = setInterval(function() {
18                             This.style.width = This.offsetWidth - 8 + "px";
19                             if(This.offsetWidth <= 120) {
20                                 This.style.width = '120px';
21                                 clearInterval(This.time);
22                             }
23                         }, 30)
24                     }
25                 }
26             }
27         </script>
View Code

 

</html>

目录
相关文章
|
前端开发 JavaScript
手把手教你用Javascript制作随机星星效果图
手把手教你用Javascript制作随机星星效果图
297 0
手把手教你用Javascript制作随机星星效果图
|
3月前
|
存储 JavaScript 前端开发
JS中让二级菜单栏一直保持展开状态,页面跳转也不会改变
JS中让二级菜单栏一直保持展开状态,页面跳转也不会改变
|
JavaScript 前端开发
原生js制作选项卡详解,适合无基础的人学习
原生js制作选项卡详解,适合无基础的人学习
109 0
原生js制作选项卡详解,适合无基础的人学习
|
JavaScript 前端开发 CDN
哇哦,弹幕居然是这么弄出来的,一文学会如何用js制作一个弹幕效果
哇哦,弹幕居然是这么弄出来的,一文学会如何用js制作一个弹幕效果
215 0
哇哦,弹幕居然是这么弄出来的,一文学会如何用js制作一个弹幕效果
|
存储 移动开发 前端开发
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
114 0
零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍
|
人工智能 JavaScript 前端开发
使用 HTML、CSS 和 JS 制作一个中国象棋
这是一个简单的 JavaScript 项目,中国象棋人机对战,文末有完整源码免费下载地址,祝大家玩得开心,学得轻松。
341 2
使用 HTML、CSS 和 JS 制作一个中国象棋
|
JavaScript 数据安全/隐私保护
利用JS制作简易登录验证方法二
利用JS制作简易登录验证方法二
利用JS制作简易登录验证方法二
|
JavaScript 数据安全/隐私保护
利用JS制作简易登录验证
利用JS制作简易登录验证
利用JS制作简易登录验证
|
前端开发 JavaScript
手把手教你用Javascript制作随机星星效果图
手把手教你用Javascript制作随机星星效果图
411 0
手把手教你用Javascript制作随机星星效果图