<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery鼠标悬停弹出层效果</title>
<link href="css/lanrenzhijia.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="servicesPop">
<div id="serFocus">
<div class="fr" style="position:relative;"><a href="javascript:void(0)" class="close" onclick="closeSerPop()"> </a></div>
<div class="box" id="flash1">
<div class="yidongL" style="width:360px"><img src="images/services_c1.jpg" width="400" height="273" /></div>
<div class="servicesTxt" style="float:left">
<div class="serTit"> <span class="black font18">成品网站解决网站</span> <br />
<span class="font16">Application software solutions</span> </div>
<p>我们提供Windows及Mac等多操作系统多平台的应用软件交互设计、视觉设计、应用端开发服务。从用户研究、需求沟通、草图方案、原型制图、视觉设计、定制开发、软件测试维护等全方位的为客户提供最有效的解决方案。</p>
<div class="cl"><a href="http://www.lanrenzhijia.com/" class="yidongBt white">成品网站模版</a></div>
</div>
</div>
<div class="box" id="flash2">
<div class="servicesTxt" style="padding-left:85px;">
<div class="serTit" style="padding-top:15px;"> <span class="black font18">网站设计解决方案</span> <br />
<span class="font16">Web and network solutions</span> </div>
<p>根据用户的需求、市场状况、企业情况等进行综合分析可用性的Web解决方案，有效提升企业形象及品牌的知名度。从产品交互原型设计、视觉设计、HTML5页面开发、功能定制开发等高品质、一体化流程的网站建设服务。</p>
<div class="cl"><a href="http://www.lanrenzhijia.com/" class="yidongBt white">网站设计套餐</a></div>
</div>
<div class="fl"><img src="images/services_f1.jpg" width="320" height="273" /></div>
</div>
<div class="box" id="flash3">
<div class="yidongL"><img src="images/services_f1.jpg" width="320" height="273" /></div>
<div class="servicesCon">
<div class="serTit"> <span class="black font18">移动应用产品解决方案</span> <br />
<span class="font16">Mobile app solutions</span> </div>
<div class="cl"><span class="Apple">IOS</span><span class="Android">Android</span><span class="Win8">Windows Phone 8</span></div>
<ul>
<li>iPhone/Android/Win8 APP交互设计 视觉设计 功能定制开发 基于HTML5开发的网页APP</li>
<li>iPad/iPad Retina/iPad Mini/Android/Win8 APP交互设计 视觉设计 功能定制开发</li>
</ul>
<div class="cl"><a href="javascript:" class="yidongBt white">移动应用案例</a></div>
</div>
</div>
</div>
<div class="flash_bar"> <span class="no" id="f1" onclick="changeflash(1)"></span> <span class="no" id="f2" onclick="changeflash(2)"></span> <span class="no" id="f3" onclick="changeflash(3)"></span> </div>
</div>
<div id="servicesBox">
<div id="serBox1" class="serBox" onclick="serFocus(1)">
<div class="serBoxOn"></div>
<div class="pic1 mypng"><img src="images/ser_box2.png" /></div>
<div class="pic2 mypng"><img src="images/ser_box2b.png" /></div>
<div class="txt1"><span class="tit">成品网站解决方案</span>智能建站系统，可视化操作，30分钟即可搞定的精美企业网站,资深设计师打造精美模板</div>
<div class="txt2"><span class="tit">成品网站解决方案</span>智能建站系统，可视化操作，30分钟即可搞定的精美企业网站,资深设计师打造精美模板</div>
</div>
<div class="fgH20"></div>
<div id="serBox2" class="serBox" onclick="serFocus(2)">
<div class="serBoxOn"></div>
<div class="pic1 mypng"><img src="images/ser_box3.png" /></div>
<div class="pic2 mypng"><img src="images/ser_box3b.png" /></div>
<div class="txt1"><span class="tit">网站设计解决方案</span>根据用户的需求、市场状况、企业情况等进行综合分析可用性的Web解决方案</div>
<div class="txt2"><span class="tit">网站设计解决方案</span>根据用户的需求、市场状况、企业情况等进行综合分析可用性的Web解决方案</div>
</div>
<div class="fgH20"></div>
<div id="serBox3" class="serBox" onclick="serFocus(3)">
<div class="serBoxOn"></div>
<div class="pic1 mypng"><img src="images/ser_box1.png" /></div>
<div class="pic2 mypng"><img src="images/ser_box1b.png" /></div>
<div class="txt1"><span class="tit">移动应用产品解决方案</span>iOS/Android/Win8 APP交互设计、视觉设计、HTML5开发、功能定制开发</div>
<div class="txt2"><span class="tit">移动应用产品解决方案</span>iOS/Android/Win8 APP交互设计、视觉设计、HTML5开发、功能定制开发</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".serBox").hover(function(){
$(this).children().stop(false,true);
$(this).children(".serBoxOn").fadeIn("slow");
$(this).children(".pic1").animate({right: -110},400);
$(this).children(".pic2").animate({left: 105},400);
$(this).children(".txt1").animate({left: -240},400);
$(this).children(".txt2").animate({right: 40},400);
},function(){
$(this).children().stop(false,true);
$(this).children(".serBoxOn").fadeOut("slow");
$(this).children(".pic1").animate({right:105},400);
$(this).children(".pic2").animate({left: -110},400);
$(this).children(".txt1").animate({left: 40},400);
$(this).children(".txt2").animate({right: -240},400);
});
});
function serFocus(i){
$(".servicesPop").slideDown("normal");
changeflash(i);
}
function closeSerPop(){
$(".servicesPop").slideUp("fast");
}
var currentindex=1;
function changeflash(i){
currentindex=i;
for (j=1;j<=6;j++){
if(j==i){
$("#flash"+j).fadeIn("normal");
$("#flash"+j).css("display","block");
$("#f"+j).removeClass();
$("#f"+j).addClass("dq");
}else{
$("#flash"+j).css("display","none");
$("#f"+j).removeClass();
$("#f"+j).addClass("no");
}
}
}
</script>
</body>
</html>