首页>>Jquery图片>>相册图片展示(2013-10-27)

相册图片展示

相册图片展示
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

XML/HTML Code
  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. <style type="text/css">  
  7. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}  
  8. fieldset,img{border:0}  
  9. :focus{outline:0}  
  10. address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:normal;font-weight:normal}  
  11. h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}  
  12. abbr,acronym{border:0;font-variant:normal}  
  13. input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}  
  14. code,kbd,samp,tt{font-size:100%}  
  15. input,button,textarea,select{*font-size:100%}  
  16. body{line-height:1.5}  
  17. ol,ul{list-style:none}  
  18. table{border-collapse:collapse;border-spacing:0}  
  19. caption,th{text-align:left}sup,sub{font-size:100%;vertical-align:baseline}  
  20. :link,:visited,ins{text-decoration:none}  
  21. blockquote,q{quotes:none}  
  22. blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}  
  23. .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}  
  24. .clearfix{display:inline-block}  
  25. *html .clearfix{height:1%}  
  26. .clearfix{display:block}  
  27. h1{display:none}  
  28. a,a:link,a:visited{color:#333;text-decoration:none}  
  29. a:hover{color:#f60;text-decoration:underline}  
  30. body{font-size:12px;font-family:"Microsoft Yahei",Tahoma,"SimSun";color:#333;background:url(images/douyan_bg.jpg) center top   
  31. no-repeat #000;}  
  32. /* slide */  
  33. .slide{width:680px;height:345px;overflow:hidden;margin:0 auto;background:#000;border-top:1px solid #d21bd4}  
  34. .slide_box{width:169px;height:345px;overflow:hidden;position:relative;float:left;border-right:1px solid #999;cursor:pointer;background-repeat:no-repeat}  
  35. .slide_box.last{border-right-width:0}  
  36. .slide .bg1 .navbox{width:169px}  
  37. .slide #box_1{position:absolute;left:0;bottom:0}  
  38. .slide #box_1 .navtitle{width:169px;height:45px;line-height:45px;overflow:hidden;font-size:20px;text-align:center}  
  39. .slide #box_1 .navsumary{padding:10px;margin-bottom:3px;font-size:12px;line-height:26px}  
  40. .slide #box_2{position:absolute;left:0;bottom:45px}.slide #box_2 .navtitle{width:169px;height:45px;line-height:45px;overflow:hidden;font-size:20px;text-align:center}  
  41. .slide #box_2 .navsumary{padding:10px;margin-bottom:3px;font-size:12px;line-height:26px}  
  42. .slide #box_3{position:absolute;left:0;bottom:90px}  
  43. .slide #box_3 .navtitle{width:169px;height:45px;line-height:45px;overflow:hidden;font-size:20px;text-align:center}  
  44. .slide #box_3 .navsumary{padding:10px;margin-bottom:3px;font-size:12px;line-height:26px}  
  45. .slide #box_4{position:absolute;left:0;bottom:45px}  
  46. .slide #box_4 .navtitle{width:169px;height:45px;line-height:45px;overflow:hidden;font-size:20px;text-align:center}  
  47. .slide #box_4 .navsumary{padding:10px;margin-bottom:3px;font-size:12px;line-height:26px}  
  48. .slide .navbox .navsumary{color:#fff;display:none;padding:10px}  
  49. .navtitle img{display:none}  
  50. .slide .navbox .navtitle a,.slide .navbox .navtitle a:link,.slide .navbox .navtitle a:visited{color:#fff;text-decoration:none}  
  51. .slide .navbox .navtitle a:hover{color:#fff;text-decoration:underline}  
  52. .slide .navtitle,.slide .navsumary{position:relative}  
  53. .slide div.bg{position:absolute;width:100%;height:100%;z-index:1;left:0;top:0}  
  54. .slide div.txt{position:relative;z-index:2}  
  55. .slide div.bg{filter:alpha(opacity=60);opacity:.6}  
  56. .slide #box_1 div.bg{background-color:#00ffea}  
  57. .slide #box_2 div.bg{background-color:#9d9d9d}  
  58. .slide #box_3 div.bg{background-color:#c020e8}  
  59. .slide #box_4 div.bg{background-color:#e4ff00}  
  60. .more{position:absolute;right:30px;top:500px;font-size:18px;color:#fff;}  
  61. .more a:link,.more a:visited{color:#fff;}  
  62. .bg1{background-image:url(../freejs.jpg)}  
  63. .bg2{background-image:url(../zhoushan.jpg)}  
  64. .bg3{background-image:url(../xianggang.jpg)}  
  65. .bg4{background-image:url(../sanya.jpg)}  
  66. </style>  
  67. <!--[if lt IE 7]>  
  68. <style type="text/css">  
  69. .slide #box_1 .navsumary,.slide #box_2 .navsumary,.slide #box_3 .navsumary,.slide #box_4 .navsumary,.slide .navbox .navsumary{padding:0;width:169px;height:90px;overflow:hidden}  
  70. .slide .navsumary div.txt{padding:10px;width:224px;}  
  71. </style>  
  72. <![endif]-->  
  73. <script type="text/javascript" src="jquery.js"></script>  
  74. <script type="text/javascript">  
  75. $(function(){  
  76.     // 幻灯片图片滑动  
  77.     $("html,body").animate({scrollTop:$("#slide").offset().top},800);  
  78.     var a =0;  
  79.     $("#slide>.slide_box").click(function(){  
  80.         var a = $(this).find(".navbox>.navtitle a").attr("href");  
  81.         window.open(a);  
  82.         return !1   
  83.     }),  
  84.     $("#slide>.slide_box").mouseover(function(){  
  85.         var b =$(this).index();  
  86.         if(b!= a){  
  87.             $("#slide .navsumary").hide();  
  88.             $(this).find(".navbox>.navsumary").show();  
  89.             var c = "bg" + (b + 1);  
  90.             b < a && ($.browser.msie?(  
  91.                 $(".slide_box").stop().animate({backgroundPositionX: "680px"}, 0).removeClass("bg1 bg2 bg3 bg4").addClass(c),  
  92.                 $("#box_1").parent().stop().animate({backgroundPositionX: "0"}, 100),  
  93.                 $("#box_2").parent().stop().animate({backgroundPositionX:"-170px"},200),  
  94.                 $("#box_3").parent().stop().animate({backgroundPositionX: "-340px"},300),  
  95.                 $("#box_4").parent().stop().animate({backgroundPositionX: "-510px"},400,  
  96.                 function(){  
  97.                     $(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c);  
  98.                 }  
  99.             )):(  
  100.                 $(".slide_box").stop().animate({backgroundPosition:"680px 0"},0).removeClass("bg1 bg2 bg3 bg4").addClass(c),  
  101.                 $("#box_1").parent().stop().animate({backgroundPosition:"0 0"},100),  
  102.                 $("#box_2").parent().stop().animate({backgroundPosition:"-170px 0"},200),  
  103.                 $("#box_3").parent().stop().animate({backgroundPosition:"-340px 0"},300),  
  104.                 $("#box_4").parent().stop().animate({backgroundPosition: "-510px 0"},400,  
  105.                 function(){  
  106.                     $(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c)  
  107.                 }  
  108.             )), a = b),b > a &&($.browser.msie?(  
  109.                 $(".slide_box").stop().animate({backgroundPositionX: "-680px" },0).removeClass("bg1 bg2 bg3 bg4").addClass(c),  
  110.                 $("#box_1").stop().parent().animate({backgroundPositionX:"0"},400,  
  111.                     function(){  
  112.                         $(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c)  
  113.                     }  
  114.                 ),  
  115.                 $("#box_2").parent().stop().animate({ backgroundPositionX: "-170px" }, 300),  
  116.                 $("#box_3").parent().stop().animate({backgroundPositionX: "-340px"}, 200),  
  117.                 $("#box_4").parent().stop().animate({backgroundPositionX: "-510px"}, 100)):($(".slide_box").stop().animate({backgroundPosition:"-680px 0"},0).removeClass("bg1 bg2 bg3 bg4").addClass(c),  
  118.                 $("#box_1").stop().parent().animate({backgroundPosition:"0 0"},400,  
  119.                     function(){  
  120.                         $(".slide_box,#slide").removeClass("bg1 bg2 bg3 bg4").addClass(c)  
  121.                     }  
  122.                 ),  
  123.                 $("#box_2").parent().stop().animate({backgroundPosition:"-170px 0"}, 300),  
  124.                 $("#box_3").parent().stop().animate({backgroundPosition:"-340px 0"},200),  
  125.                 $("#box_4").parent().stop().animate({backgroundPosition: "-510px 0"},100)  
  126.             ), a = b)  
  127.         }  
  128.     });  
  129.           
  130. });  
  131. </script>  
  132.       
  133. </head>  
  134. <body>  
  135.     <div class="slide clearfix bg1" id="slide">  
  136.         <div class="slide_box bg1" style="background-position:0 0;">  
  137.             <div id="box_1" class="navbox">  
  138.                 <div class="navsumary" style="display:block">  
  139.                     <div class="bg"></div>  
  140.                     <div class="txt">freejs.net 演示</div>  
  141.                 </div>  
  142.                 <div class="navtitle">  
  143.                     <div class="bg"></div>  
  144.                     <div class="txt"><a href="http://www.freejs.net/"><img src="../freejs.jpg" alt="" />freejs</a></div>  
  145.                 </div>  
  146.             </div>  
  147.         </div>  
  148.           
  149.         <div class="slide_box bg1" style="background-position:-170px 0;">  
  150.             <div id="box_2" class="navbox">  
  151.                 <div class="navsumary">  
  152.                     <div class="bg"></div>  
  153.                     <div class="txt">freejs.net 演示</div>  
  154.                 </div>  
  155.                 <div class="navtitle">  
  156.                     <div class="bg"></div>  
  157.                     <div class="txt"><a href="http://www.freejs.net/"><img src="../zhoushan.jpg" alt="" />舟山</a></div>  
  158.                 </div>  
  159.             </div>  
  160.         </div>  
  161.           
  162.         <div class="slide_box bg1" style="background-position:-340px 0;">  
  163.             <div id="box_3" class="navbox">  
  164.                 <div class="navsumary">  
  165.                     <div class="bg"></div>  
  166.                     <div class="txt">freejs.net 演示</div>  
  167.                 </div>  
  168.                 <div class="navtitle">  
  169.                     <div class="bg"></div>  
  170.                     <div class="txt"><a href="http://www.freejs.net/"><img src="../xianggang.jpg" alt="" />香港</a></div>  
  171.                 </div>  
  172.             </div>  
  173.         </div>  
  174.           
  175.         <div class="slide_box bg1 last" style="background-position:-510px 0;">  
  176.             <div id="box_4" class="navbox">  
  177.                 <div class="navsumary">  
  178.                     <div class="bg"></div>  
  179.                     <div class="txt">freejs.net 演示</div>  
  180.                 </div>  
  181.                 <div class="navtitle">  
  182.                     <div class="bg"></div>  
  183.                     <div class="txt"><a href="http://www.freejs.net/"><img src="../sanya.jpg" alt="" />三亚</a></div>  
  184.                 </div>  
  185.             </div>  
  186.         </div>  
  187.     </div><!--slide end-->  
  188. </div>  
  189. </body>  
  190. </html>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_81.html