﻿<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>山西源道力合网络科技有限公司</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">

<!-- Bootstrap -->
<link rel="stylesheet" type="text/css"  href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">

<!-- Slider
================================================== -->
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">

<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css"  href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">


<script type="text/javascript" src="js/modernizr.custom.js"></script>
<script type="text/javascript" src="js/jquery.1.11.1.js"></script>

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<style>

.footer {
    overflow: hidden;
    position: relative;
    z-index: 20;
}


.foot-top{
    overflow: hidden;
    background: #000;
    padding: 25px 0;
}


.wrap {
    width: 1260px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
}

.foot-info {
    overflow: hidden;
    float: left;
    width: 55%;
}

.foot-info-cell {
    position: relative;
    font-size: 14px;
    color: #fff;
    padding-left: 35px;
    margin-bottom: 10px;
    width: 100%;
    float: left;
    box-sizing: border-box;
}


.foot-ewm {
    width: 200px;
    float: right;
    overflow: hidden;
}


</style>


</head>
<body>
<!-- Navigation
==========================================-->
<nav id="tf-menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	  </button>
	  <a class="navbar-brand" href="index.html" style="margin-left:-100px">山西源道力合网络科技有限公司</a>
	</div>

	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	  <ul class="nav navbar-nav navbar-right">
		<li><a href="#tf-home" class="page-scroll">主页</a></li>
		<li><a href="#tf-about" class="page-scroll">公司简介</a></li>
		<li><a href="#tf-services" class="page-scroll">核心业务</a></li>
		<li><a href="#tf-works" class="page-scroll">经典案例</a></li>
		<li><a href="#tf-team" class="page-scroll">服务团队</a></li>		
		<li><a href="#tf-clients" class="page-scroll">合作客户</a></li>
		<li><a href="#tf-zizhi" class="page-scroll">荣誉资质</a></li>
		<li><a href="#tf-contact" class="page-scroll">联系我们</a></li>
	  </ul>
	</div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<!-- Home Page
==========================================-->
<div id="tf-home" class="text-center">
	<div class="">
		<div class="content">
			<h1 0>源道力合<strong><span class="color">欢迎您</span></strong></h1>
			<p class="lead">"服务于您，专业于行" &nbsp;<strong>数字化、信息化一站式解决方案提供商</strong></p>
			
		</div>
	</div>
</div>

<!-- About Us Page
==========================================-->
<div id="tf-about">
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<img src="img/09.png" class="img-responsive">
			</div>
			<div class="col-md-6">
				<div class="about-text">
					<div class="section-title">
						<h2>公司简介</h2>
					
						<hr>
						<div class="clearfix"></div>
					</div>
					<p class="intro"> &nbsp;&nbsp; &nbsp;&nbsp;  山西源道力合网络科技有限公司成立于2016年3月，注册资金500万，是一家提供专业信息化服务的高科技企业，公司主要业务有：软件开发、运维服务、系统集成、计算机及网络硬件、视频会议系统等，公司不仅整合了行业技术资源，而且积极培育人才，汇聚了一批计算机网络工程业内精英，在信息化系统方案设计、软件开发、系统的实施以及系统后期等维护服务过程中，公司都能提供一系列的解决方案，使用户得到一站式服务。</p>
					<p class="intro"> &nbsp;&nbsp; &nbsp;&nbsp;  公司成立3年以来，先后通过了科技型中小企业入库、高新技术企业评定，依托强大的技术背景和人员储备，坚持“诚信、专业、务实、卓越”的战略方针，“服务于您，专业于行”的服务方针，建立健全的管理体制和严格的质量保证体系，以专业化的服务及高质量的产品，为客户提供“全面、专业、高效”的技术服务。公司凭借对服务的专注，对行业的专注，积累了众多客户，并赢得客户的一致好评。</p>
					<ul class="about-list">
						<li>
							<span class="fa fa-dot-circle-o"></span>
							<strong>战略方针</strong> - <em>诚信、专业、务实、卓越</em>
						</li>
						<li>
							<span class="fa fa-dot-circle-o"></span>
							<strong>服务宗旨</strong> - <em>服务于您，专业与行</em>
						</li>
						<li>
							<span class="fa fa-dot-circle-o"></span>
							<strong>技术理念</strong> - <em>全面、专业、高效</em>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>


<!-- Services Section
==========================================-->
<div id="tf-services" class="text-center">
	<div class="container">
		<div class="section-title center">
			<h2> <strong>核心业务</strong></h2>
			<div class="line">
				<hr>
			</div>
			<div class="clearfix"></div>
			<small><em>公司坚持以”水”为核心，围绕“水资源保护、防灾减灾、水环境与水生态”等领域不断进行技术与服务的信息化创新，运用航天卫星、无人机及机器人等高科技设备与行业尖端技术，以遥感影像、航拍三维数据和水文水质水动力学模型为技术特色，提供软件开发、三维仿真、数值模拟、系统集成建设、专业技术服务及运维管理服务等业务。</em></small>
		</div>
		<div class="space"></div>
		<div class="row">
			<div class="col-md-3 col-sm-6 service">
				<i class="fa fa-desktop"></i>
				<h4><strong>运行维护</strong></h4>
		<p>在互联网+的趋势下，伴随着大量的涉及国计民生的业务系统投入使用，系统业
务量大量增加，对网络和系统的可靠性要求越来越高，运维工作量越来越大。政府
部门如何选择合适的IT运维方式，建立合理的运维管理机制，在风险、成本、效果之
间找到平衡点，对信息部门的运维保障工作提出了更高的要求。</p>
			</div>

			<div class="col-md-3 col-sm-6 service">
				<i class="fa fa-mobile"></i>
				<h4><strong>软件开发</strong></h4>
				<p>专业化背景下的软件开发企业，主要开发了地下水超采区治理信息服务系统，地下水超采区业务管理系统，地下水分析评价系统，各种运维管理平台以及多种手机APP业务系统，拥有多项软件著作权。</p>
			</div>

			<div class="col-md-3 col-sm-6 service">
				<i class="fa fa-envira"></i>
				<h4><strong>网络安全</strong></h4>
				<p>运用航天卫星、无人机及机器人等高科技设备与行业尖端技术，以遥感影像、航拍三维数据和水文水质水动力学模型为技术特色，提供专业化、信息化、科技化、尖端化的行业解决方案。</p>
			</div>
			<div class="col-md-3 col-sm-6 service">
				<i class="fa fa-globe"></i>
				<h4><strong>系统集成</strong></h4>
				
		<p>系统集成解决方案，得力于对产品原厂商前沿技术和发展趋势的深刻理解，结合了作为服务商的丰富咨询设计经验，旨在帮助企业级客户构建互联
网时代的新一代信息系统基础架构。 将信息系统基础架构建设划分两大层次：基础支
撑层、融合控制与资源管理层，并为不同行业客户提供基础架构集成、基础架构运维
两大定制化服务。</p>
			</div>
		</div>
	</div>
</div>


<!-- Portfolio Section
==========================================-->
<div id="tf-works">
	<div class="container"> <!-- Container -->
		<div class="section-title text-center center">
			<h2> <strong>经典案例</strong></h2>
			<div class="line">
				<hr>
			</div>
			<div class="clearfix"></div>
			<small><em></em></small>
		</div>
		<div class="space"></div>

		<div class="categories">
			
			<ul class="cat">
				<li class="pull-left"><h4></h4></li>
				<li class="pull-right">
					<ol class="type">
						<li><a href="#" data-filter="*" class="active">All</a></li>
						<li><a href="#" data-filter=".web">软件开发</a></li>
						<li><a href="#" data-filter=".photography">系统运维</a></li>
						<li><a href="#" data-filter=".app" >系统集成</a></li>
					</ol>
				</li>
			</ul>
			<div class="clearfix"></div>
		</div>

		<div id="lightbox" class="row">

			<div class="col-sm-6 col-md-3 col-lg-3 web">
				<div class="portfolio-item">
					<div class="hover-bg">
						
						    <div>
							<h4 style=="color:black;font-weight:bolder">地下水超采区治理信息服务系统</h4>
							</div>
							<a href="javascript:void(0)">
							<img src="img/portfolio/001.png" class="img-responsive" alt="地下水超采区治理信息服务系统">
						</a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3 col-lg-3 web">
				<div class="portfolio-item">
					<div class="hover-bg">
							
							<div class="">
								<h4>地下水超采区业务管理系统</h4>
								
							</div>
							<a href="javascript:void(0)">
							<img src="img/portfolio/002.png" class="img-responsive" alt="地下水超采区业务管理系统">
					</a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3 col-lg-3 web">
				<div class="portfolio-item">
					<div class="hover-bg">
					
							<div class="">
								<h4>地下水分析评价系统</h4>	
							</div>
							<a href="javascript:void(0)">
							<img src="img/portfolio/003.png" class="img-responsive" alt="地下水分析评价系统">
				    <a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3 col-lg-3 web">
				<div class="portfolio-item">
					<div class="hover-bg">
					
							<div class="">
								<h4 style="color:black !important">运维管理平台</h4>
							
							</div>
							<a href="javascript:void(0)">
						<img src="img/portfolio/004.png" class="img-responsive" alt="运维管理平台">
					     </a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3 col-lg-3 photography">
				<div class="portfolio-item">
					<div class="hover-bg">
					 
							<div class="">
								<h4>专业运维</h4>
							
							</div>
							 <a href="javascript:void(0)">
							<img src="img/portfolio/005.png" class="img-responsive" alt="专业运维">
						</a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3 col-lg-3 photography">
				<div class="portfolio-item">
					<div class="hover-bg">
					
						<div class="">
							<h4>视频会议系统运维</h4>
							
							
						</div>
						<a href="javascript:void(0)">
						<img src="img/portfolio/006.png" class="img-responsive" alt="视频会议系统运维">
					</a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3 col-lg-3 photography">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<div class="">
								<h4>水利行业专业运维</h4>
							</div>
							<a href="javascript:void(0)">
							<img src="img/portfolio/007.png" class="img-responsive" alt="水利行业专业运维">
						</a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3 col-lg-3 photography">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<div class="">
								<h4>网络安全运维</h4>
							</div>
							<a href="javascript:void(0)">
							<img src="img/portfolio/008.png" class="img-responsive" alt="网络安全运维">
						</a>
					</div>
				</div>
			</div>


            <div class="col-sm-6 col-md-3 col-lg-3 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<div class="">
								<h4>倾斜摄影</h4>
							</div>
							<a href="javascript:void(0)">
							<img src="img/portfolio/09.png" class="img-responsive" alt="倾斜摄影">
						<a/>
					</div>
				</div>
			</div>


			<div class="col-sm-6 col-md-3 col-lg-3 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<div class="">
								<h4 style="color:black !important">AR、VR展厅</h4>
							</div>
							<a href="javascript:void(0)">
							<img src="img/portfolio/10.png" class="img-responsive" alt="AR、VR展厅">
					       </a>
					</div>
				</div>
			</div>
			
			
			<div class="col-sm-6 col-md-3 col-lg-3 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<div class="">
								<h4>数据中心建设</h4>
							</div>
							<a href="javascript:void(0)">
							<img src="img/portfolio/11.png" class="img-responsive" alt="数据中心建设">
						</a>
					</div>
				</div>
			</div>
			
			<div class="col-sm-6 col-md-3 col-lg-3 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<div class="">
								<h4>视频会议</h4>
							</div>
							<a href="javascript:void(0)">
							<img src="img/portfolio/12.png" class="img-responsive" alt="视频会议">
						</a>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>



<!-- Team Page
==========================================-->
<div id="tf-team" class="text-center">
	<div class="overlay">
		<div class="container">
			<div class="section-title center">
				<h2><strong>服务团队</strong></h2>
				<div class="line">
					<hr>
				</div>
			</div>

			<div id="team" class="owl-carousel owl-theme row">
				<div class="item">
					<div class="thumbnail">
						<img src="img/team/001.jpg" alt="..." class="img-circle team-img">
						<div class="caption">
							<h3>软件研发部</h3>
							<p>CEO / Founder</p>
							<p>主要负责公司的日常管理及运营，并同时负责公司市场业务的拓展</p>
						</div>
					</div>
				</div>

				<div class="item">
					<div class="thumbnail">
						<img src="img/team/002.jpg" alt="..." class="img-circle team-img">
						<div class="caption">
							<h3>运维服务部</h3>
							<p>CEO / Founder</p>
							<p>主要负责公司日常事宜的管理工作，包括：人员招聘、人员培训、合同签订、保存、用车申请、付款申请、公司采买等</p>
						</div>
					</div>
				</div>

				<div class="item">
					<div class="thumbnail">
						<img src="img/team/004.jpg" alt="..." class="img-circle team-img">
						<div class="caption">
							<h3>网络安全部</h3>
							<p>CEO / Founder</p>
							<p>项目部主要负责配合公司领导进行业务对接，并提供运维服务、系统集成、计算机网络硬件、视屏会议等业务的洽谈、方案编写、实施、验收</p>
						</div>
					</div>
				</div>

				<div class="item">
					<div class="thumbnail">
						<img src="img/team/08.jpg" alt="..." class="img-circle team-img">
						<div class="caption">
							<h3>系统集成部</h3>
							<p>CEO / Founder</p>
							<p>研发部主要负责配合公司领导进行业务对接，并提供所需软件的需求调研、概要设计、详细设计、软件研发、测试、试运行、交付</p>
						</div>
					</div>
				</div>

				
			</div>
			
		</div>
	</div>
</div>



<!-- Clients Section
==========================================-->
<div id="tf-clients" class="text-center">
	<div class="overlay">
		<div class="container">

			<div class="section-title center">
				<h2>合作 <strong>客户</strong></h2>
				<div class="line">
					<hr>
				</div>
			</div>
			<div id="clients" class="owl-carousel owl-theme">
				<div class="item">
					<img src="img/client/006.png">
				</div>
				<div class="item">
					<img src="img/client/007.png">
				</div>
				<div class="item">
					<img src="img/client/012.png">
				</div>
				<div class="item">
					<img src="img/client/013.png">
				</div>
				<div class="item">
					<img src="img/client/018.png">
				</div>
				<div class="item">
					<img src="img/client/020.png">
				</div>
				<div class="item">
					<img src="img/client/021.jpg">
				</div>
				<div class="item">
					<img src="img/client/022.jpg">
				</div>
				<div class="item">
					<img src="img/client/023.jpg">
				</div>
				<div class="item">
					<img src="img/client/024.jpg">
				</div>
				<div class="item">
					<img src="img/client/025.jpg">
				</div>
			</div>

		</div>
	</div>
</div>


<!--- 经典案例 section
===========================================-->
<div id="tf-zizhi">
<div class="container"> <!-- Container -->
		<div class="section-title text-center center">
			<h2> <strong>荣誉资质</strong></h2>
			<div class="line">
				<hr>
			</div>
			<div class="clearfix"></div>
			<small><em></em></small>
		</div>
		<div class="space"></div>

		<div id="lightbox" class="row">

			<div class="col-sm-6 col-md-2 col-lg-2 web">
				<div class="portfolio-item">
					<div class="hover-bg">
							<a href="javascript:void(0)">
							<img src="img/zizhi/001.jpg" class="img-responsive" alt="">
						</a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-2 col-lg-2 web">
				<div class="portfolio-item">
					<div class="hover-bg">
							
							
							<a href="javascript:void(0)">
							<img src="img/zizhi/002.jpg" class="img-responsive" alt="">
					</a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-2 col-lg-2 web">
				<div class="portfolio-item">
					<div class="hover-bg">
					
							
							<a href="javascript:void(0)">
							<img src="img/zizhi/003.jpg" class="img-responsive" alt="">
				    <a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-2 col-lg-2 web">
				<div class="portfolio-item">
					<div class="hover-bg">
					
							<a href="javascript:void(0)">
						<img src="img/zizhi/004.jpg" class="img-responsive" alt="">
					     </a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-2 col-lg-2 web">
				<div class="portfolio-item">
					<div class="hover-bg">
							 <a href="javascript:void(0)">
							<img src="img/zizhi/005.jpg" class="img-responsive" alt="">
						</a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-2 col-lg-2 web">
				<div class="portfolio-item">
					<div class="hover-bg">
						<a href="javascript:void(0)">
						<img src="img/zizhi/006.jpg" class="img-responsive" alt="">
					</a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-2 col-lg-2 photography">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<a href="javascript:void(0)">
							<img src="img/zizhi/007.jpg" class="img-responsive" alt="">
						</a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-2 col-lg-2 photography">
				<div class="portfolio-item">
					<div class="hover-bg">
							<a href="javascript:void(0)">
							<img src="img/zizhi/008.png" class="img-responsive" alt="">
						</a>
					</div>
				</div>
			</div>


            <div class="col-sm-6 col-md-2 col-lg-2 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<a href="javascript:void(0)">
							<img src="img/zizhi/009.png" class="img-responsive" alt="">
						<a/>
					</div>
				</div>
			</div>


			<div class="col-sm-6 col-md-2 col-lg-2 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<a href="javascript:void(0)">
							<img src="img/zizhi/010.png" class="img-responsive" alt="">
					       </a>
					</div>
				</div>
			</div>
			
			
			<div class="col-sm-2 col-md-3 col-lg-2 app">
				<div class="portfolio-item">
					<div class="hover-bg">
							<a href="javascript:void(0)">
							<img src="img/zizhi/011.jpg" class="img-responsive" alt="">
						</a>
					</div>
				</div>
			</div>
			
			<div class="col-sm-6 col-md-2 col-lg-2 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<a href="javascript:void(0)">
							<img src="img/zizhi/012.jpg" class="img-responsive" alt="">
						</a>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-2 col-lg-2 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<a href="javascript:void(0)">
							<img src="img/zizhi/013.jpg" class="img-responsive" alt="">
						</a>
					</div>
				</div>
			</div>
			
			<div class="col-sm-6 col-md-2 col-lg-2 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<a href="javascript:void(0)">
							<img src="img/zizhi/014.jpg" class="img-responsive" alt="">
						</a>
					</div>
				</div>
			</div>
			
			<div class="col-sm-6 col-md-2 col-lg-2 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<a href="javascript:void(0)">
							<img src="img/zizhi/015.png" class="img-responsive" alt="">
						</a>
					</div>
				</div>
			</div>
			
			<div class="col-sm-6 col-md-2 col-lg-2 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<a href="javascript:void(0)">
							<img src="img/zizhi/016.png" class="img-responsive" alt="">
						</a>
					</div>
				</div>
			</div>
			
			<div class="col-sm-6 col-md-2 col-lg-2 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<a href="javascript:void(0)">
							<img src="img/zizhi/20.png" class="img-responsive" alt="">
						</a>
					</div>
				</div>
			</div>
			
			<div class="col-sm-6 col-md-2 col-lg-2 app">
				<div class="portfolio-item">
					<div class="hover-bg">
						
							<a href="javascript:void(0)">
							<img src="img/zizhi/21.png" class="img-responsive" alt="">
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>




<!-- Contact Section
==========================================-->
<div id="tf-contact" >
	<div class="footer">
    <div class="foot-top">
         <div class="wrap">
            <div class="foot-info">
               
			    <div class="foot-info-cell" style="font-size:20px">山西源道力合网络科技有限公司</div><br/>
                <div class="foot-info-cell"><img src="img/portfolio/icon12.png"/><span>电话：0351-3818129,18234034540</span></div>
                <div class="foot-info-cell"><img src="img/portfolio/mail.png"/><span>邮箱：sxydlh@163.com</span></div>
                <div class="foot-info-cell"style="width: 100%;"><img src="img/portfolio/add.png"/><span>地址：山西省太原市小店区龙城北街君太中央公园A区2号楼3单元2103</span></div>
            </div>
             
		    <div  class="foot-info-cell">
			Copyright &copy; 2020 山西源道力合网络科技有限公司版权所有 <a href="https://beian.miit.gov.cn/" target="_blank">晋ICP备20004695号</a>
			</div>			
			 
       </div>
    </div>
    </div>
</div>


<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:10002;width:100%;height:100%;display:none;">
			<div id="innerdiv" style="position:absolute;">
				<img id="max_img" style="border:5px solid #fff;" src="" />
			</div>
</div>





<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>
<script type="text/javascript" src="js/jquery.isotope.js"></script>
<script src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/main.js"></script>
   <script type="text/javascript">
            $(document).ready(function() {
                $(".img-responsive").click(function(){
                    var _this = $(this);//将当前的min_img元素作为_this传入函数
                    imgShow("#outerdiv", "#innerdiv", "#max_img", _this);
                });
            });
            function imgShow(outerdiv, innerdiv, max_img, _this){
                var src = _this.attr("src");//获取当前点击的min_img元素中的src属性
                $("#max_img").attr("src", src);//设置#max_img元素的src属性

                /*获取当前点击图片的真实大小，并显示弹出层及大图*/
                $("<img/>").attr("src", src).load(function(){
                    var windowW = $(window).width();//获取当前窗口宽度
                    var windowH = $(window).height();//获取当前窗口高度
                    var realWidth = this.width;//获取图片真实宽度
                    var realHeight = this.height;//获取图片真实高度
                    var imgWidth, imgHeight;
                    var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

                    if(realHeight>windowH*scale) {//判断图片高度
                        imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                        imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                        if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                            imgWidth = windowW*scale;//再对宽度进行缩放
                        }
                    } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                        imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                        imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
                    } else {//如果图片真实高度和宽度都符合要求，高宽不变
                        imgWidth = realWidth;
                        imgHeight = realHeight;
                    }
                    $("#max_img").css("width",imgWidth);//以最终的宽度对图片缩放

                    var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
                    var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
                    $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
                    $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
                });

                $(outerdiv).click(function(){//再次点击淡出消失弹出层
                    $(this).fadeOut("fast");
                });
            }
        </script>



</body>
</html>