jquery鼠標懸停彈出層效果

時間  2019-11-10
標籤 jquery 鼠標 懸停 彈出 效果 欄目 JQuery 简体版
原文   原文鏈接

<!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()">&nbsp;</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>javascript

 

<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(){css

$(".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");
}html

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

</body>
</html>jquery

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程