【完整版】从分析页面布局、标记各部分区域高宽开始，构建一个挂号平台页面

其他 2019-01-29 23:25:32 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yin_991/article/details/81161038

【图片素材是在慕课网上的，我在看完视频之后，觉得这种开发方法很适合我这种小白去多多尝试，多多练习，这里我也是奔着掌握web前端开发方法来写的，嗯，代码及所有图片的标记也是我自己从头写过和标记的，这也算对自己学习的一个总结与扩展吧】

我理解中，一般的开发流程应该是从需求分析到设计，再到编写代码，然后前后端对接调试。在开发一个平台之前，我们首先需要从UI设计师的手中拿到设计好了的图稿，初步分析页面的布局应该如何做，在心里对整个页面有一个大概的轮廓之后，才可以接下来去做进一步的排版，其实在一开始如果先把最外层的框架写好了，然后再把细节的内容加进去，这样会非常容易且有条理地去搭建一个项目。

虽然这里我没有用git、npm、webpack、vue的脚手架工具来写网页，但是在这里我依然需要一步一步地从外到内完成各部分的内容，模块化、组件化地构建一个网页。像刚才说的那样，我会先搭建一个外层框架，然后再往里面添加文字、图片等内容，最后再添加有交互效果的组件。预期能做到的网页效果主要体现在交互效果上，这里我会用jQuery去完成，包括轮播图组件、按需切换搜索组件、导航选项卡组件、底部箭头回到顶部组件。完成这些之后，如果我有时间的话，会考虑把banner图右侧的那些搜索功能使用ajax和json技术实现，当然，使用Ajax的话我会用一个本地服务器来调试。

通过以上分析，先进入第一部分内容的完成，那就是初步判断页面的各部分，得出页面的整体布局，标记各区域的像素大小，然后代码实现。

（一）划分区域

页面可分为顶部、头部、导航部、banner部、主要内容部、脚部。

顶部是由联系方式、登录、注册入口等内容，头部区域是logo图和搜索框；导航区域就是横着排过去的那些，同时也包括侧边导航区域，也就是banner图左侧的那部分；banner图区域就是轮播图、“快速预约”、“帮助中心”这些内容；主要内容部分就是医院详细展示部分、“最新公告”、“听诊公告”这些内容；最后就是脚部了。分析完布局之后，就开始标记各区域的大小，以及背景颜色。这里我用的图片工具是PxCook，用这个工具可以标记宽高、颜色、距离。

（二）所以最初的HTML结构是：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>城市预约挂号平台</title>
	<link rel="stylesheet" type="text/css" href="style/layout.css">
</head>
<body>
	<div class="top"></div>
	<div class="header"></div>
	<div class="nav"></div>
	<div class="banner"></div>
	<div class="content"></div>
	<div class="footer"></div>
</body>
</html>

从图片可以看出，除了banner区域、content区域，其他区域的宽度都是占据100%，但内容都集中在中间，同时，又因为div是块级元素，占据的是一整行，所以只要给它们设了高度或者内容有高度，宽度就会撑满100%。所以，可以给每个区域再加一个class为wrap的div，其宽度根据图片划分的来算，就刚好是1000px，有了这个wrap，把它居中，内容写在里面，就会集中在水平中部。

但是有一个比较难处理的点，那就是在导航nav区域与banner区域之间的那块下拉下来的部分有点难处理，在这里，因为nav里面刚好嵌套了wrap，而wrap又刚好水平居中在页面，所以可以给wrap加一个相对定位，然后在html结构上，在wrap里面，添加一个div（class为nav-list），nav-list的定位设为绝对定位，top、left都设为0，宽度是190px，高度是459px，这样就可以定位到图片所示的位置。在这里要注意的是，不能给wrap设置overflow:hidden;的样式，因为nav-list的高度是撑出来了的，如果这样设置的话，超过nav高度的那部分会被隐藏。

再看banner区域，因为wrap是要写公共样式的，所以公共样式可能会对banner不太适应，因为banner区域里的内容以后会有浮动，需要清除浮动，所以要在父元素上设置overflow:hidden;为了不那么麻烦，就不为banner加wrap了，直接设置banner父元素宽度为（1000-190）=810px，减去的190是为上面的nav-list留出来的，但是减去了190px，就要补回来，要不然就会宽度不够，所以要给宽度左边撑开190px，为了能让内容向右移动190px，又能让宽度撑开达到1000px，所以就可以设置左内边距为190px，这样就刚刚好。设置左内边距留空位是一个很好用的技巧，这在后面的背景填充上还会用到。

还有一个特别好用的技巧是左浮动设置，这用到了banner区域和content区域里。三块区域，第一块的宽度最大，第二第三块等宽，且第一块的宽度与第二（第三）的宽度加起来刚好等于父元素的宽度，这时可以设置它们的浮动都是左浮动，这样就会使它们呈两列布局了。

以上是对整体最外层布局的分析，下面是初步完成的样式及代码：

初步轮廓：

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>城市预约挂号平台</title>
	<link rel="stylesheet" type="text/css" href="style/layout.css">
</head>
<body>
	<div class="top"></div>
	<div class="header"></div>
	<div class="nav">
		<div class="wrap">
			<div class="nav-list"></div>
		</div>
	</div>
	<div class="banner">
			<div class="banner-slide"></div>
			<div class="banner-search"></div>
			<div class="banner-help"></div>
	</div>
	<div class="content">
		<div class="wrap">
			<div class="content-detail"></div>
			<div class="content-news"></div>
			<div class="content-stop"></div>
		</div>
	</div>
	<div class="footer"></div>
</body>
</html>

layout.css

*{
	margin:0;
	padding:0;
}
.top{
	height: 30px;
	background-color:#f6f5f4;
}
.wrap{
	width: 1000px;
	margin:0 auto;
	position: relative;
}
.header{
	height: 92px;
	background-color:#fff;
}
.nav{
	height: 36px;
	background-color:#0cc3f2;
	position: relative;
}
.nav-list{
	position: absolute;
	width: 190px;
	height:459px;
	background: #03a5f0;
	top:0;
	left: 0;
	z-index: 0;
}
.banner{
	height: 414px;
	padding:10px 0 10px 190px;
	width: 810px;
	margin:0 auto;
	overflow: hidden;
}
.banner-slide{
	height: 414px;
	width: 544px;
	background: #f2eaef;
	float:left;
	margin:0 8px;
}
.banner-search{
	width: 250px;
	height: 255px;
	background:#eee;
	float:left;
}
.banner-help{
	width: 250px;
	height: 146px;
	margin-top:12px;
	float:left;
	background:#eee;
}
.content{
	overflow: hidden;
}
.content-detail{
	width: 742px;
	height: 486px;
	background: #eee;
	float: left;
	margin-right: 8px;
}
.content-news,
.content-stop{
	width: 250px;
	height: 238px;
	float:left;
	background:#eee;
}
.content-stop{
	margin-top: 12px;
}
.footer{
	height: 119px;
	background: #eee;
	margin-top: 42px;
}

（三）写完了外层框架之后，现在就可以向里面添加内容了。这部分的内容是静态页面的内容，还有交互动态的那些效果放在下一部分。

顶部结构

<div class="top">
	<div class="wrap">
		<div class="left gray">010-114/116411电话预约</div>
		<div class="right">
			<span class="gray">欢迎来到城市医院预约挂号统一平台&nbsp;&nbsp;请&nbsp;&nbsp;&nbsp;</span>
			<span><a href="#3" class="blue">登录</a>&nbsp;&nbsp;&nbsp;<a href="#3" class="blue">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#3" class="blue">帮助中心</a></span>
		</div>
	</div>
</div>

全局样式及顶部基础样式

ul{
	list-style: none;
}
a{
	text-decoration: none;
}
input,select{
	outline: none;
	border: none;
}
/*顶部基础样式*/
.top{
	font-size: 12px;
	line-height: 30px;
	overflow: hidden;
}
.top .left{
	float: left;
	padding-left: 20px;
	background: url(../img/icon-call.png) no-repeat left center;
}
.top .right{
	float: right;
}
.top .gray{
	color: #86837e;
}
.top .blue{
	color: #00a7e0;
}

头部结构

<div class="header">
	<div class="wrap">
		<div class="logo">
			<img src="./img/logo.png" alt="城市预约挂号平台">
		</div>
		<div class="header-search">
			<span class="header-search-focus">医院</span>
			<div class="header-search-list">
				<span><a href="#2">疾病</a></span>
				<span><a href="#2">科室</a></span>
				<span><a href="#2">医院</a></span>
			</div>
			<input type="text" placeholder="请输入搜索内容" class="header-search-text">
			<a href="#1" class="header-search-click">&nbsp;</a>
		</div>
	</div>
</div>

头部基础样式

/*头部基础样式*/
.logo{
	float: left;
	padding:10px 20px;
}
.logo,
.logo img{
	width: 393px;
	height: 72px;
	line-height: 72px;
}
.header-search{
	float: right;
	width:326px;
	height: 37px;
	line-height: 37px;
	background: url(../img/ui-search.jpg);
	position: relative;
	top: 27px;
	z-index: 99;
}
.header-search .header-search-focus{
	width: 69px;
	float: left;
	text-indent: 14px;
	font-size: 14px;
	color: #fff;
}
.header-search .header-search-list{
	width: 69px;
	float: left;
	position: absolute;
	top: 37px;
	box-shadow: 2px 2px 2px rgba(0,0,0,.5);
	display: none;
}
.header-search .header-search-list span a{
	display: block;
	height: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 14px;
	background-color: #fff; 
	color: #74786d;
}
.header-search .header-search-list span a:hover{
	background-color: #eee;
}
.header-search .header-search-text{
	text-indent: 4px;
	font-size: 14px;
}
.header-search .header-search-click{
	float: right;
	width: 41px;
	height: 37px;
	text-align: center;
}

导航部结构

        <div class="nav">
		<div class="wrap">
			<ul class="nav-item clearfix">
				<li><a href="#2">全部科室</a></li>
				<li><a href="#2">按医院挂号</a></li>
				<li><a href="#2">按科室挂号</a></li>
				<li><a href="#2">按疾病挂号</a></li>
				<li><a href="#2">最新公告</a></li>
				<li><a href="#2">社会知名医院</a></li>
			</ul>
			<div class="nav-list"></div>
		</div>
	</div>

导航部基础样式

/*导航部基础样式*/
.clearfix:after{
	content: " ";
	height: 0;
	display: block;
	clear: both;
}
.nav-item{
	position: absolute;
	z-index: 9;
}
.nav-item li{
	float: left;
	margin-right: 20px;
	text-align: center;
	font-size: 16px;
	width: 100px;
	line-height: 36px;
}
.nav-item li>a{
	color: #fff;
}
.nav-item li:nth-child(1){
	width: 190px;
}

banner部结构

	<div class="banner">
			<div class="banner-slide"></div>
			<div class="banner-search">
				<div class="banner-search-caption">快速预约</div>
				<select name="area" id="area" class="banner-search-select">
					<option value="">医院地区</option>
					<option value="a1">东城区</option>
					<option value="a2">西城区</option>
				</select>
				<select name="level" id="level" class="banner-search-select">
					<option value="">医院等级</option>
					<option value="l1">等级1</option>
					<option value="l2">等级2</option>
					<option value="l3">等级3</option>
				</select>
				<select name="name" id="name" class="banner-search-select">
					<option value="">科室名称</option>
					<option value="m1">泌尿科</option>
					<option value="m2">咽喉科</option>
				</select>
				<select name="department" id="department" class="banner-search-select">
					<option value="">医院科室</option>
					<option value="k1">科室1</option>
					<option value="k2">科室2</option>
				</select>
				<input type="submit" value="快速查询" class="banner-search-submit">
			</div>
			<div class="banner-help">
				<div class="banner-help-caption">帮助中心</div>
				<div class="banner-help-list">
					<span><a  href="#2">账号指南</a></span>
					<span><a  href="#2">预约指南</a></span>
					<span><a  href="#2">账号找回</a></span>
					<span><a  href="#2">常见问题</a></span>
				</div>
			</div>
	</div>

banner部基础样式

/*banner区域*/
.banner-search-caption,
.banner-help-caption{
	width: 72px;
	padding-left: 24px;
	height: 24px;
	background: url(../img/icon-help.png) no-repeat 0 0;
	margin:12px auto;
	color: #ffdb00;
}
.banner-help-caption{
	background-position-y:-23px;
	color: #04b5e9;
}
.banner-search-select{
	border: 1px solid #dfdedb;
	display: block;
	height: 25px;
	width: 166px;
	color: #666560;
	margin: 8px auto;
	padding:2px;
	font-size: 12px;
}
.banner-search-submit{
	display: block;
	width: 106px;
	height: 31px;
	margin:0 auto;
	background: #ffcc00;
	text-align: center;
	line-height: 31px;
	color: #fff;
	font-size: 14px;
	margin-top: 18px;
	border-radius: 3px;
}
.banner-help-list span{
	display: block;
	float: left;
	width: 124px;
	height: 24px;
	line-height: 24px;
	margin:8px auto;
	text-align: center;
}
.banner-help-list span a{
	color: #04b5e9;
	font-size: 14px;
}

content部结构

	<div class="content">
		<div class="wrap">
			<div class="content-detail">
				<ul class="content-detail-caption">
					<li class="content-detail-caption-item item-focus">医院</li>
					<li class="content-detail-caption-item">科室</li>
				</ul>
				<ul class="content-detail-block">
					<li class="content-detail-block-item item-focus"><a href="#2">全部</a></li>
					<li class="content-detail-block-item"><a href="#2">东城区</a></li>
					<li class="content-detail-block-item"><a href="#2">西城区</a></li>
					<li class="content-detail-block-item"><a href="#2">朝阳区</a></li>
					<li class="content-detail-block-item"><a href="#2">丰台区</a></li>
					<li class="content-detail-block-item"><a href="#2">石景山区</a></li>
					<li class="content-detail-block-item"><a href="#2">海淀区</a></li>
					<li class="content-detail-block-item"><a href="#2">门头沟区</a></li>
					<li class="content-detail-block-item"><a href="#2">房山区</a></li>
					<li class="content-detail-block-item"><a href="#2">其他</a></li>
				</ul>
				<div class="content-detail-hospital">
					<div class="hospital-image">
						<img src="./img/hospital-1.jpg" alt="北京协和医院">
					</div>
					<div class="content-detail-hospital-description">
						<div class="description-title">
							北京协和医院<span class="level">【三级甲等】</span>
						</div>
						<p class="description-tel">电话：东院咨询台:010-69155564...</p>
						<p class="description-address">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓...</p>
					</div>
				</div>
				<div class="content-detail-hospital">
					<div class="hospital-image">
						<img src="./img/hospital-2.jpg" alt="北京协和医院">
					</div>
					<div class="content-detail-hospital-description">
						<div class="description-title">
							北京协和医院<span class="level">【三级甲等】</span>
						</div>
						<p class="description-tel">电话：东院咨询台:010-69155564...</p>
						<p class="description-address">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓...</p>
					</div>
				</div>
				<div class="content-detail-hospital">
					<div class="hospital-image">
						<img src="./img/hospital-3.jpg" alt="北京协和医院">
					</div>
					<div class="content-detail-hospital-description">
						<div class="description-title">
							北京协和医院<span class="level">【三级甲等】</span>
						</div>
						<p class="description-tel">电话：东院咨询台:010-69155564...</p>
						<p class="description-address">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓...</p>
					</div>
				</div>
				<div class="content-detail-hospital">
					<div class="hospital-image">
						<img src="./img/hospital-4.jpg" alt="北京协和医院">
					</div>
					<div class="content-detail-hospital-description">
						<div class="description-title clearfix">
							北京协和医院<span class="level">【三级甲等】</span>
						</div>
						<p class="description-tel">电话：东院咨询台:010-69155564...</p>
						<p class="description-address">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓...</p>
					</div>
				</div>
				
				
				<ul class="content-detail-list clearfix">
					<li><a href="#2">首都儿科研究所附属儿童医&nbsp;【三级甲等】</a></li>
					<li><a href="#2">首都儿科研究所附属儿童医&nbsp;【三级甲等】</a></li>
					<li><a href="#2">首都儿科研究所附属儿童医&nbsp;【三级甲等】</a></li>
					<li><a href="#2">首都儿科研究所附属儿童医&nbsp;【三级甲等】</a></li>
					<li><a href="#2">首都儿科研究所附属儿童医&nbsp;【三级甲等】</a></li>
					<li><a href="#2">首都儿科研究所附属儿童医&nbsp;【三级甲等】</a></li>
				</ul>
				<div class="content-detail-more">更多医院</div>
			</div>
			<div class="content-news">
				<div class="content-news-caption">
					<span class="content-news-caption-left">最新公告</span>
					<span class="content-news-caption-right">|&nbsp;更多</span>
				</div>
				<ul class="content-news-list">
					<li><a href="#2">阜外医院特需门诊暂停更新号源通...</a></li>
					<li><a href="#2">防护策略升级通知</a></li>
					<li><a href="#2">阜外医院特需门诊暂停更新号源通...</a></li>
					<li><a href="#2">防护策略升级通知</a></li>
					<li><a href="#2">阜外医院特需门诊暂停更新号源通...</a></li>
					<li><a href="#2">防护策略升级通知</a></li>
				</ul>
			</div>
			<div class="content-stop">
				<div class="content-stop-caption">
					<span class="content-stop-caption-left">停诊公告</span>
					<span class="content-stop-caption-right">|&nbsp;更多</span>
				</div>
				<ul class="content-stop-list">
					<li><a href="#2">首都医科大学附属北京安贞医院消...</a></li>
					<li><a href="#2">首都医科大学附属北京安贞医院妇...</a></li>
					<li><a href="#2">阜外医院特需门诊暂停更新号源通...</a></li>
					<li><a href="#2">北京安贞医院妇科</a></li>
					<li><a href="#2">首都医科大学附属北京安贞医院消...</a></li>
					<li><a href="#2">阜外医院特需门诊暂停更新号源通...</a></li>
				</ul>
			</div>
		</div>
	</div>

content部基础样式

/*content区域基础样式*/
.content-detail{
	overflow: hidden;
}
.content-detail-caption{
	height: 35px;
	line-height: 35px;
	background: #f6f6f9;
}
.content-detail-caption-item{
	float: left;
	width: 112px;
	text-align: center;
	cursor: pointer;
}
.content-detail-caption-item{
	color: #0cc3f2;
}
.content-detail-caption .item-focus{
	background:#0cc3f2;
	color: #fff;
}
.content-detail-block{
	border-bottom:1px solid #f4f6f9;
	background: #fff;
	height: 33px;
	line-height: 43px;
	padding-top: 10px;
}
.content-detail-block-item>a{
	float: left;
	display: inline-block;
	width: 60px;
	height: 25px;
	color: #4d4947;
	line-height: 25px;
	margin-left: 10px;
	text-align: center;
	font-size: 14px;
}
.content-detail-block .item-focus>a{
	background: #0cc3f2;
	color: #fff;
}
.content-detail-hospital{
	width: 360px;
	height: 120px;
	/*background:green;*/
	float: left;
}
.hospital-image{
	float: left;
	width: 110px;
	height: 100px;
	padding: 10px;
}
.hospital-image img{
	width: 100%;
	height: 110px;
}
.content-detail-hospital-description{
	margin-top: 20px;
}
.description-title{
	overflow: hidden;
}
.description-title{
	font-size: 16px;
	color: #069adb;
}
.description-title .level{
	float: right;
	font-size: 13px;
	color: #97958f;
}
.description-address,
.description-tel{
	color: #666560;
	font-size: 13px;
	line-height: 20px;
}
.description-tel{
	margin:8px 0;
}
.content-detail-list>li{
	float: left;
	width: 360px;
	height: 25px;
	border-bottom: 1px dashed #bbb;
	text-align: center;
	margin-top: 8px;
}
.content-detail-list li:nth-child(1),
.content-detail-list li:nth-child(2){
	margin-top: 20px;
}
.content-detail-list>li a{
	color:#666560;
	font-size: 13px;
}
.content-detail-more{
	text-align: center;
	color: #3382bf;
	font-size: 14px;
	margin-top:15px;
}
.content-news,
.content-stop{
	border: 1px solid #f4f6f9;
}
.content-news-caption,
.content-stop-caption{
	height: 40px;
	background: #f4f6f9;
	line-height: 40px;
	padding:0 20px;
}
.content-news-caption-left,
.content-stop-caption-left{
	float:left;
	font-size: 16px;
}
.content-news-caption-left{
	color: #ffbd00;
}
.content-stop-caption-left{
	color: #05b7ec;
}
.content-news-caption-right,
.content-stop-caption-right{
	float: right;
	font-size: 13px;
	color: #86837e;
}
.content-news-list,
.content-stop-list{
	font-size: 12px;
	padding-left: 34px;
	background: url(../img/list-yellow.jpg) no-repeat 18px 10px;
}
.content-stop-list{
	background-image: url(../img/list-blue.jpg);
}
.content-news-list>li,
.content-stop-list>li{
	height: 30px;
	line-height: 30px;
}
.content-news-list>li>a,
.content-stop-list>li>a{
	color: #96948e;
}
.content-detail{
	border: 1px solid #f4f6f9;
}

脚部结构

	<div class="footer">
		素材来源：https://www.imooc.com&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
		网页制作：By&nbsp;&nbsp;J JIA.Yin
	</div>

脚部基础样式

.footer{
	line-height: 119px;
	color: #666;
	text-align: center;
	font-size: 14px;
}

目前，页面样式是这样：

（四）这一part就是重要的交互部分，首先要完成的是导航部分的鼠标经过的显示和鼠标离开之后的隐藏操作。呃，我还是直接上代码吧，其实也挺简单的，就是利用绝对定位把右边详细介绍的内容的位置固定住，默认是隐藏，然后当鼠标划过左边的导航横条时，就显示，离开就恢复默认的隐藏状态。这里有一个小技巧就是先用一个外层盒子包裹一个盒子，里层的盒子就是左边导航横条，然后再在这个导航横条的盒子里面再添加一个盒子用来装右边的详细介绍，这样如果有多个导航横条，每当鼠标经过某个横条时，就会对应当前的横条所要展示的详细内容。

导航结构

			<div class="nav-list">
				<div class="nav-list-menu">
					<div class="menu-row">
						<div class="menu-row-left">
							<div class="menu-row-right">
								a
							</div>
						</div>
						
					</div>
					<div class="menu-row">
						<div class="menu-row-left">
							<div class="menu-row-right">
								b
							</div>
						</div>
						
					</div>
					<div class="menu-row">
						<div class="menu-row-left">
							<div class="menu-row-right">
								c
							</div>
						</div>
						
					</div>
				</div>
			</div>

导航样式

/*导航部分的交互样式*/
.nav-list-menu{
	position: absolute;
	top: 36px;
}
.menu-row-left{
	width: 190px;
	height: 40px;
}
.menu-row-left:hover{
	background: #fff;
}
.menu-row-right{
	width: 538px;
	height: 423px;
	background: #fff;
	position: absolute;
	top:0;
	left:190px;
	z-index: 999;
	display: none;
}
.menu-row-left:hover .menu-row-right{
	display: block;
}

这样就能实现初步想要达到的效果：

接下来就是把需要填充完的内容填充完。

条件搜索部

这部分实现的交互效果是当点击搜索框左侧时，可以按条件选择搜索，也就是说，当点击了搜索左侧时，下拉条件显示，当选择某条件时，这个条件就显示在搜索框左侧，当点击任搜索框之外的任意部位，下拉条件要回归隐藏。

条件搜索部结构的改动

			<div class="header-search ui-search">
				<span class="header-search-focus ui-focus">医院</span>
				<div class="header-search-list ui-search-list">
					<span><a href="#2" class="ui-search-item">疾病</a></span>
					<span><a href="#2" class="ui-search-item">科室</a></span>
					<span><a href="#2" class="ui-search-item">医院</a></span>
				</div>
				<input type="text" placeholder="请输入搜索内容" class="header-search-text">
				<a href="#1" class="header-search-click">&nbsp;</a>
			</div>

条件搜索部交互组件

	//条件搜索部分
	$.fn.UiSearch=function(){
		var ui=$(this);
		$('.ui-focus',ui).on('click',function(){
			$('.ui-search-list').show();
			return false;
		})
		$('body').on('click',function(){
			$('.ui-search-list').hide();
		})
		$('.ui-search-item',ui).on('click',function(){
			$('.ui-focus',ui).get([0]).innerHTML=this.text;
		})
	}
	//调用方法
	$(".ui-search").UiSearch();

选项卡部

这一部分的效果要实现当点击第一行的选项时，下方要对应到相应的内容，比如当第一个选项是当前选项，它的下方就应该对应第一选项的内容，其他选项的下方内容隐藏。还有第二行的城区选项也是一样的道理，比如当前选项是全部，那么全部对应的下方内容显示，其他隐藏。

结构改动

	<div class="content ui-content">
		<div class="wrap">
			<div class="content-detail">
				<ul class="content-detail-caption">
					<li class="content-detail-caption-item item-focus ui-content-detail-caption">医院</li>
					<li class="content-detail-caption-item ui-content-detail-caption">科室</li>
				</ul>
				<div class="ui-block">
					<div class="ui-content-list ui-content-list-focus">
						<ul class="content-detail-block">
							<li class="content-detail-block-item item-focus ui-block-item"><a href="#2">全部</a></li>
							<li class="content-detail-block-item ui-block-item"><a href="#2">东城区</a></li>
							<li class="content-detail-block-item ui-block-item"><a href="#2">西城区</a></li>
							<li class="content-detail-block-item ui-block-item"><a href="#2">朝阳区</a></li>
							<li class="content-detail-block-item ui-block-item"><a href="#2">丰台区</a></li>
							<li class="content-detail-block-item ui-block-item"><a href="#2">石景山区</a></li>
							<li class="content-detail-block-item ui-block-item"><a href="#2">海淀区</a></li>
							<li class="content-detail-block-item ui-block-item"><a href="#2">门头沟区</a></li>
							<li class="content-detail-block-item ui-block-item"><a href="#2">房山区</a></li>
							<li class="content-detail-block-item ui-block-item"><a href="#2">其他</a></li>
						</ul>
						<div class="ui-block">
							<div class="ui-block-list ui-block-list-focus">
								<div class="content-detail-hospital">
									<div class="hospital-image">
									<img src="./img/hospital-1.jpg" alt="北京协和医院">
								</div>
								<div class="content-detail-hospital-description">
									<div class="description-title">
										北京协和医院<span class="level">【三级甲等】</span>
									</div>
									<p class="description-tel">电话：东院咨询台:010-69155564...</p>
									<p class="description-address">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓...</p>
								</div>
								</div>
								<div class="content-detail-hospital">
									<div class="hospital-image">
										<img src="./img/hospital-2.jpg" alt="北京协和医院">
									</div>
									<div class="content-detail-hospital-description">
										<div class="description-title">
											北京协和医院<span class="level">【三级甲等】</span>
										</div>
										<p class="description-tel">电话：东院咨询台:010-69155564...</p>
										<p class="description-address">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓...</p>
									</div>
								</div>
								<div class="content-detail-hospital">
									<div class="hospital-image">
										<img src="./img/hospital-3.jpg" alt="北京协和医院">
									</div>
									<div class="content-detail-hospital-description">
										<div class="description-title">
											北京协和医院<span class="level">【三级甲等】</span>
										</div>
										<p class="description-tel">电话：东院咨询台:010-69155564...</p>
										<p class="description-address">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓...</p>
									</div>
								</div>
								<div class="content-detail-hospital">
									<div class="hospital-image">
										<img src="./img/hospital-4.jpg" alt="北京协和医院">
									</div>
									<div class="content-detail-hospital-description">
										<div class="description-title clearfix">
											北京协和医院<span class="level">【三级甲等】</span>
										</div>
										<p class="description-tel">电话：东院咨询台:010-69155564...</p>
										<p class="description-address">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓...</p>
									</div>
								</div>
								<ul class="content-detail-list clearfix">
									<li><a href="#2">首都儿科研究所附属儿童医&nbsp;【三级甲等】</a></li>
									<li><a href="#2">首都儿科研究所附属儿童医&nbsp;【三级甲等】</a></li>
									<li><a href="#2">首都儿科研究所附属儿童医&nbsp;【三级甲等】</a></li>
									<li><a href="#2">首都儿科研究所附属儿童医&nbsp;【三级甲等】</a></li>
									<li><a href="#2">首都儿科研究所附属儿童医&nbsp;【三级甲等】</a></li>
									<li><a href="#2">首都儿科研究所附属儿童医&nbsp;【三级甲等】</a></li>
								</ul>
								<div class="content-detail-more">更多医院</div>
							</div>
							<div class="ui-block-list">东城区</div>
							<div class="ui-block-list">西城区</div>
							<div class="ui-block-list">朝阳区</div>
							<div class="ui-block-list">丰台区</div>
							<div class="ui-block-list">石景山区区</div>
							<div class="ui-block-list">海淀区</div>
							<div class="ui-block-list">门头沟区</div>
							<div class="ui-block-list">房山区</div>
							<div class="ui-block-list">其他</div>
						</div>
					</div>
					<div class="ui-content-list">其他科室</div>	
				</div>
				
			</div>
			<div class="content-news">
				<div class="content-news-caption">
					<span class="content-news-caption-left">最新公告</span>
					<span class="content-news-caption-right">|&nbsp;更多</span>
				</div>
				<ul class="content-news-list">
					<li><a href="#2">阜外医院特需门诊暂停更新号源通...</a></li>
					<li><a href="#2">防护策略升级通知</a></li>
					<li><a href="#2">阜外医院特需门诊暂停更新号源通...</a></li>
					<li><a href="#2">防护策略升级通知</a></li>
					<li><a href="#2">阜外医院特需门诊暂停更新号源通...</a></li>
					<li><a href="#2">防护策略升级通知</a></li>
				</ul>
			</div>
			<div class="content-stop">
				<div class="content-stop-caption">
					<span class="content-stop-caption-left">停诊公告</span>
					<span class="content-stop-caption-right">|&nbsp;更多</span>
				</div>
				<ul class="content-stop-list">
					<li><a href="#2">首都医科大学附属北京安贞医院消...</a></li>
					<li><a href="#2">首都医科大学附属北京安贞医院妇...</a></li>
					<li><a href="#2">阜外医院特需门诊暂停更新号源通...</a></li>
					<li><a href="#2">北京安贞医院妇科</a></li>
					<li><a href="#2">首都医科大学附属北京安贞医院消...</a></li>
					<li><a href="#2">阜外医院特需门诊暂停更新号源通...</a></li>
				</ul>
			</div>
		</div>
	</div>

样式

/*选项卡样式*/
.ui-content-list{
	display: none;
}
.ui-content-list-focus{
	display: block;
}
.ui-block-list{
	display: none;
}
.ui-block-list-focus{
	display: block;
}

组件

	//选项卡部分
	$.fn.UiContent=function(){
		var ui=$(this);
		$('.ui-content-detail-caption',ui).on('click',function(){
			$(this)
				.addClass('item-focus')
				.siblings()
				.removeClass('item-focus')
				.end();
			var index = $(this).index();
			$('.ui-content-list').eq(index)
				.show()
				.siblings()
				.hide()
				.end();
		})
		$('.ui-block-item',ui).on('click',function(){
			$(this)
				.addClass('item-focus')
				.siblings()
				.removeClass('item-focus')
				.end();
			var index2 = $(this).index();
			$('.ui-block-list').eq(index2)
				.show()
				.siblings()
				.hide()
				.end();
		})
	}
    $('.ui-content').UiContent();

轮播图部分

结构改动

		<div class="banner-slide ui-slide">
			<div class="ui-slide-block">
				<div class="ui-slide-image ui-slide-image-focus">
					<img class="ui-slide-item ui-slide-item-focus" src="./img/banner_1.jpg">
				</div>
				<div class="ui-slide-image">
					<img class="ui-silde-item" src="./img/banner_2.jpg">
				</div>
				<div class="ui-slide-image">
					<img class="ui-slide-item" src="./img/banner_3.jpg">
				</div>
			</div>
			
			<div class="ui-slide-arrow">
				<a href="#1" class="arrow arrow-left">&nbsp;</a>
				<a href="#1" class="arrow arrow-right">&nbsp;</a>
			</div>
			<div class="ui-slide-process">
				<span class="ui-slide-process-item ui-process-focus">&nbsp;</span>
				<span class="ui-slide-process-item">&nbsp;</span>
				<span class="ui-slide-process-item">&nbsp;</span>
			</div>
		</div>

样式

/*banner轮播图样式*/
.ui-slide-item{
	height: 414px;
	width: 544px;
}
.ui-slide{
	overflow: hidden;
	position: relative;
}
.ui-slide-image{
	display: none;
}
.ui-slide-image-focus{
	display: block;
}
.ui-slide-arrow{
	width: 544px;
	height: 40px;
	position: absolute;
	top: 207px;
	margin-top: -20px;
}
.ui-slide-arrow .arrow{
	display: inline-block;
	width: 40px;
	height: 40px;
	font-size: 24px;
	color:#fff;
	line-height: 40px;
	text-align: center;
	background:url(../img/ui-slider-arrow.png) no-repeat;
}
.ui-slide-arrow .arrow-right{
	float:right;
	background-position-x: -40px;
}
.ui-slide-process{
	position: absolute;
	bottom: 0px;
	left: 272px;
	width: 100px;
	height: 18px;
	line-height: 18px;
	margin-left: -50px;
	text-align: center;
	/*background: red;*/
}
.ui-slide-process-item{
	display: inline-block;
	width: 20px;
	height: 20px;
	background:url(../img/ui-slider-process.png) no-repeat;
}
.ui-slide-process-item:hover,
.ui-process-focus{
	background-position-x: -20px;
}
.ui-slide-process-item:hover{
	cursor: pointer;
}
.ui-banner-z-index{
	z-index: -1;
}
.ui-slide-block{
	cursor: pointer;
}

组件

	//banner区域
	$.fn.UiSlide=function(){
		var ui=$(this);
		var slideIamge=$('.ui-slide-image');
		var processItem=$('.ui-slide-process-item');
		var len=slideIamge.length;
		var index3=0;
		var timer;
		//当点击右箭头的时候，下一张图片显示，当前图片隐藏，需要获得图片索引，
		//当索引大于最后一张索引时，需返回到最开始那张
		$('.arrow-right',ui).on('click',function(){
			forwardImage();
		})
		//当点击左箭头的时候，上一张图片显示，当前图片隐藏，需要获得图片索引，
		// 当索引小于第一张索引时，返回到最后一张
		$('.arrow-left',ui).on('click',function(){
			backImage();
		})
		//当点击进度点时，切换图片
		processItem.on('click',function(){
			var currentCount=$(this).index();
			changeImage(currentCount)
		})
		function changeImage(index){
			slideIamge.eq(index)
				.show()
				.siblings()
				.hide()
				.end();
			processItem.eq(index)
				.addClass('ui-process-focus')
				.siblings()
				.removeClass('ui-process-focus')
				.end();
		}
		//下一张图片显示，当前图片隐藏，需要获得图片索引，
		//当索引大于最后一张索引时，需返回到最开始那张
		function forwardImage(){
			index3++;
			changeImage(index3);
			if (index3>=len) {
				index3=0;
				changeImage(index3);
			}
		}
		//上一张图片显示，当前图片隐藏，需要获得图片索引，
		// 当索引小于第一张索引时，返回到最后一张
		function backImage(){
			index3--;
			changeImage(index3);
			if (index3<0) {
				index3=len-1;
				changeImage(index3);
			}
		}
		//自动播放图片
		function autoImage(){
		 	timer=setInterval(function(){
				forwardImage()
			},2000);	
		}
		autoImage();
		//当鼠标悬浮在图片时，停止自动播放
		ui.on('mouseover',function(){
			clearInterval(timer);
			
		})

		ui.on('mouseout',function(){
			 autoImage();
		})
	}
    $('.ui-slide').UiSlide();

完成到这里，已经差不多做好了，只是还有一点bug，那就是导航那部分的右侧在鼠标滑过横条时无法显示，原因应该是我设置了太多定位了，搞到导航右侧被轮播图掩盖了，但是我用z-index也解决不了，所以我干脆用交互来是实现显示效果，如代码：

.ui-banner-z-index{
	z-index: -1;
}
	//完善，在鼠标悬浮在导航栏横条时，右侧的详细内容展示，因为定位的原因导致显示不了，
	//所以在这里用交互效果来完善
	$.fn.UiNav=function(){
		$('.menu-row-left').on('mouseover',function(){
			$('.ui-slide').addClass('ui-banner-z-index');
		})
		$('.menu-row-left').on('mouseout',function(){
			$('.ui-slide').removeClass('ui-banner-z-index');
		})
	}
     $('.ui-nav').UiNav();

最终效果：

end.

2018.7.24

猜你喜欢

转载自blog.csdn.net/yin_991/article/details/81161038
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022