仿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/

posted @ 2012-09-25 15:44  tinyphp  Views(362)  Comments(0)  Edit  收藏  举报