1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <title>jQuery鼠标悬停内容动画切换效果</title> 6 <style> 7 *{ margin:0; padding:0; list-style:none;} 8 img{ border:0;} 9 a{ color:#fff; text-decoration:none;} 10 11 .servicesBox { width:1000px; height:270px; margin:0 auto; clear:both; line-height:18px; color:#999999; font-size:12px;} 12 .servicesBox .serBox { cursor:pointer; border:1px solid #fff; display:inline; width:198px; height:250px; float:left; overflow:hidden; background-color:#f7f7f7; position:relative;} 13 .servicesBox .serBoxOn { font-family:"Microsoft Yahei"; display:none; width:320px; height:270px; background:url(http://demo.lanrenzhijia.com/2014/pic0910/images/serboxon_bg.gif) repeat 0px 0px; position:absolute; left:0px; top:0px; z-index:19;} 14 .servicesBox .serBox .pic1 { width:110px; height:110px; text-align:center; position:absolute; top:22px; right:41px; z-index:99;} 15 .servicesBox .serBox .pic2 { width:110px; height:110px; text-align:center; position:absolute; top:22px; left:-110px; z-index:99;} 16 .servicesBox .serBox .txt1 { width:198px; height:100px; color:#999999; position:absolute; top:145px; left:0px; z-index:99;} 17 .servicesBox .serBox .txt2 { width:198px; height:100px; color:#a9cf4f; position:absolute; top:145px; right:-240px; z-index:99;} 18 .servicesBox .serBox span.tit { font-size:16px; display:block; text-align:center;} 19 .servicesBox .serBox .txt1 .tit { color:#000000; line-height:30px;} 20 .servicesBox .serBox .txt2 .tit { color:#fff; line-height:30px; font-family:"Microsoft Yahei";} 21 .servicesBox .serBox p{ padding:0 10px; text-align:center;} 22 </style> 23 </head> 24 <body> 25 <!-- 代码begin --> 26 <div class="servicesBox"> 27 <div id="Div35" class="serBox" onclick="serFocus(1)"> 28 <div class="serBoxOn"></div> 29 <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/3.png"> </div> 30 <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/3-3.png"> </div> 31 <div class="txt1"> <span class="tit">开心网</span> 32 <p>开心网营销</p> 33 </div> 34 <div class="txt2"> <a href="http://www.lanrenzhijia.com" target="_blank" class="a_jump"><span class="tit">开心网</span> 35 <p>开心网营销</p> 36 </a> </div> 37 </div> 38 <div class="fgH20"></div> 39 <div id="Div36" class="serBox" onclick="serFocus(2)"> 40 <div class="serBoxOn"></div> 41 <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/1.png"> </div> 42 <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/1-1.png"> </div> 43 <div class="txt1"> <span class="tit">人人网</span> 44 <p>人人网营销</p> 45 </div> 46 <div class="txt2"> <a href="http://www.lanrenzhijia.com" target="_blank" class="a_jump"><span class="tit">人人网</span> 47 <p>人人网营销</p> 48 </a> </div> 49 </div> 50 <div class="fgH20"></div> 51 <div id="Div37" class="serBox" onclick="serFocus(3)"> 52 <div class="serBoxOn"></div> 53 <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/2.png"> </div> 54 <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/2-2.png"> </div> 55 <div class="txt1"> <span class="tit">QQ空间</span> 56 <p>QQ空间营销</p> 57 </div> 58 <div class="txt2"> <a href="http://www.lanrenzhijia.com" target="_blank" class="a_jump"><span class="tit">QQ空间</span> 59 <p>QQ空间营销</p> 60 </a> </div> 61 </div> 62 <div class="fgH20"></div> 63 <div id="Div38" class="serBox" onclick="serFocus(3)"> 64 <div class="serBoxOn"></div> 65 <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/35.png"> </div> 66 <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/35-35.png"> </div> 67 <div class="txt1"> <span class="tit">问答营销</span> 68 <p>问答投放 锁住潜在客户</p> 69 </div> 70 <div class="txt2"> <a href="http://www.lanrenzhijia.com" target="_blank" class="a_jump"><span class="tit">问答营销</span> 71 <p>问答投放 锁住潜在客户</p> 72 </a> </div> 73 </div> 74 <div class="fgH20"></div> 75 <div id="Div39" class="serBox" onclick="serFocus(3)"> 76 <div class="serBoxOn"></div> 77 <div class="pic1 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/31.png"> </div> 78 <div class="pic2 mypng"> <img src="http://demo.lanrenzhijia.com/2014/pic0910/images/31-31.png"> </div> 79 <div class="txt1"> <span class="tit">邮件推广</span> 80 <p>低成本 商机无限</p> 81 </div> 82 <div class="txt2"> <a href="http://www.lanrenzhijia.com" target="_blank" class="a_jump"><span class="tit">邮件推广</span> 83 <p>低成本 商机无限</p> 84 </a> </div> 85 </div> 86 </div> 87 <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> 88 <script> 89 $(function(){ 90 $(".serBox").hover( 91 function () { 92 $(this).children().stop(false,true); 93 $(this).children(".serBoxOn").fadeIn("slow"); 94 $(this).children(".pic1").animate({right: -110},400); 95 $(this).children(".pic2").animate({left: 41},400); 96 $(this).children(".txt1").animate({left: -240},400); 97 $(this).children(".txt2").animate({right: 0},400); 98 }, 99 function () { 100 $(this).children().stop(false,true); 101 $(this).children(".serBoxOn").fadeOut("slow"); 102 $(this).children(".pic1").animate({right:41},400); 103 $(this).children(".pic2").animate({left: -110},400); 104 $(this).children(".txt1").animate({left: 0},400); 105 $(this).children(".txt2").animate({right: -240},400); 106 } 107 ); 108 }); 109 </script> 110 <!-- 代码end --> 111 </body> 112 </html>