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

<!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>

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>

<!--<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-制作可伸缩的水平菜单栏的更多相关文章

js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
基于node.js制作爬虫教程
前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishu ...
用JS制作一个信息管理平台完整版
前言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容. 1.JSON的基础知识 ...
利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
JS制作图片切换
<!DOCTYPE html> <html> <head> <title>纯JS制作简单的图片切换</title> <meta cha ...
使用Vue.js制作仿Metronic高级表格（一）静态设计
Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...
使用原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
D3.js 制作中国地图 .net 公共基础类
D3.js 制作中国地图 from: http://d3.decembercafe.org/pages/map/index.html GeoJSON is a format for encoding ...
用js制作一个计算器
使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

随机推荐

.net框架中少有人知的扩展cmod
最近在利用metadata api抽取.net的原数据信息,发现了不少“坑”,也发现了不少常年用着c#的人都不知道的扩展. 说到.net原数据的可扩展性,第一个让人能想到的就是CustomAttrib ...
MEF
详情见链接:http://www.cnblogs.com/comsokey/p/MEF1.html#top
[Offer收割]编程练习赛5-1 小Ho的防护盾
#1357 : 小Ho的防护盾时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述小Ho的虚拟城市正在遭受小Hi的攻击,小Hi用来攻击小Ho城市的武器是一艘歼星舰,这艘歼星 ...
【jQuery EasyUI系列】使用属性介绍
1.ValidateBox The validatebox is designed to validate the form input fields.If users enter invalid v ...
69 su -用户和工作组管理
su su命令用户和工作组管理 su命令用于切换当前用户身份到其他用户身份,变更时须输入所要变更的用户帐号与密码. 语法 su (选项) (参数) 选项 -c<指令>或--command= ...
C++11的default和delete关键字
C11的新特性实在是太多了,这2个关键字关注的人倒是少了很多,其中有一个原因便是编译器支持得太慢了(VS到VS2013才支持上),不过这2个关键字那真是极为有用的,下面我们来看看. [default关 ...
屠龙之路_假期罢工和公主私奔_SixthDay
摘要:屠龙少年经过一周的长途跋涉后,终于来到了传说中的周末客栈.周末客栈是屠龙之路的必经之地,屠龙少年可以在周末客栈补给干粮,修补装备,好好休息一下,以便更好的上路.周末客栈有个不成文的规定:凡入住者 ...
Day Five (beta)
站立式会议站立式会议内容总结 331 今天:爬虫抓取豆瓣数据; 明天:数据展示在话题详情页,话题页修改 442 今天:了解聊天模块遇到的问题:无明天:编写聊天模块 439 今天:学习遇到困难 ...
SpringMVC学习--数据回显
简介表单提交失败需要再回到表单页面重新填写,原来提交的数据需要重新在页面上显示. 简单数据类型对于简单数据类型,如:Integer.String.Float等使用Model将传入的参数再放到req ...
jquery slide使用总结
.slideUp([duration][,complete])--目标元素向上滑入隐藏: .slideDown([duration][,complete])--目标元素向下滑出显示: .slideTo ...

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

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

随机推荐

热门专题