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>
<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>
 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>
	</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小叙

html5简单拖拽实现自动左右贴边+幸运大转盘

此篇文章主要实现两个功能: 1、点击屏幕下方签到悬浮按钮; 2、弹出幸运大转盘,转盘抽奖签到 效果如图: ? ​ ? 在网上找了很多移动端拖拽的js实现方式,大...

80250
来自专栏向治洪

React Native之Picker组件详解

Picker简介 在iOS和Android中选择器(Picker)是常见的控件之一,比如TimePickr(Android),pickerView(ios),并...

1K60
来自专栏Charlie's Road

图层几何学 -- iOS Core Animation 系列二

《图层树和寄宿图 -- iOS Core Animation 系列一》介绍了图层的基础知识和一些属性方法。这篇主要内容是学习下图层在父图层上怎么控制位置和尺寸的...

10430
来自专栏编程之旅

iOS开发——制作圆形头像

在iOS7之后,我们能发现许多应用都开始使用圆形来作为用户头像的形状,代表App就是腾讯QQ了,QQ的头像就是圆形的。

22020
来自专栏HTML5学堂

CSS3圆角 border-radius

HTML5学堂:圆角是用一段与角的两边相切的圆弧替换原来的直角。在原有网页当中,如果需要实现圆角效果,可以使用背景图的实现,但是这样会造成背景图大小和数量的增加...

68070
来自专栏偏前端工程师的驿站

CSS魔法堂:Transition就这么好玩

14950
来自专栏青玉伏案

ReactNative之参照具体示例来看RN中的FlexBox布局

今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客。上篇博客《ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State...

12720
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:快速实现手机上的图片上传功能

获取或设置相机组件上传质量的模式,默认设置为“Custom”,即表示压缩上传和原图上传都支持,如图2;

15730
来自专栏一“技”之长

iOS文本布局探讨之一——文本布局框架TextKit浅析

        在iOS开发中,处理文本的视图控件主要有4中,UILabel,UITextField,UITextView和UIWebView。其中UILabe...

9810
来自专栏deepcc

学习js在线html(富文本)编辑器

3.2K70

扫码关注云+社区

领取腾讯云代金券