仿51返利用户图解教程
模仿对象效果预览：
1、右栏：点击查看
2、点击后效果：一般有关闭和跳转到其他详细教程的按钮
3、分析效果：
点击出现透明遮挡新图层和图片新图层，图片新图层有两个关闭按钮，点击可关闭图解教程
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>模仿简单操作图解</title> 6 <script src="js/jquery-1.3.2.min.js"></script> 7 </head> 8 <style> 9 body{padding:0; margin:0;} 10 .btn1 { 11 width: 197px; 12 height: 112px; 13 display: block; 14 background: url(test.jpg) no-repeat 0 0px; 15 } 16 .btn2 { 17 width: 197px; 18 height: 112px; 19 display: block; 20 background: url(test.jpg) no-repeat 0 -112px; 21 } 22 #tujie{ width: 515px; margin:0 auto; 23 height: 626px; display:none; z-index:999; 24 position: relative; background:url("pop-guide.png");} 25 26 .close{ display:block; position:absolute; z-index:-999; overflow:hidden;} 27 .top{width: 37px; 28 height: 37px; 29 left: 420px; 30 top: 29px;} 31 .btn{width: 327px; 32 height: 55px; 33 left: 89px; 34 top: 548px;} 35 </style> 36 <script> 37 $(document).ready(function(){ 38 $("#btn-guide").hover(function(){ 39 $(this).removeClass("btn1"); 40 $(this).addClass("btn2"); 41 },function(){ 42 $(this).removeClass("btn2"); 43 $(this).addClass("btn1"); 44 }) 45 46 $("#btn-guide").click(function(){ 47 $("#pop").fadeIn(); 48 $("#tujie").fadeIn(); 49 }) 50 51 $(".close").click(function(){ 52 $("#pop").fadeOut(); 53 $("#tujie").fadeOut(); 54 }) 55 56 57 $(window).scroll(function(){ 58 $("#pop").fadeOut(); 59 $("#tujie").fadeOut(); 60 }); 61 62 }) 63 </script> 64 <body> 65 <div><a id="btn-guide" href="javascript:void(0)" class="btn1" ></a></div> 66 67 <div id="tujie"> 68 <a href="javascript:void(0)" class="top close"></a> 69 <a href="javascript:void(0)" class="btn close"></a> 70 </div> 71 <div id="pop" style=" display:none;position:absolute; background:#666666; width:1260px; height:1115px; z-index:99; left: 0; top:0; filter:Alpha(opacity=30)"></div> 72 </body> 73 </html>
源码下载：http://download.csdn.net/detail/roro5119/4596918
效果纯属模仿，仅供学习使用！互相学习请加QQ:549344672
此博客：http://www.cnblogs.com/tinyphp/
