close
典範圖片

網頁設計1.png



CSS
  1. body{ text-align:center;}
  2. *{ margin:0; padding:0;}
  3. img{ border:none;}
  4. #container{ width:900px; height:900px; background:#000000; border:1px solid #006633; margin:auto; padding:0;}
  5. #loader{ width:480px; margin:auto; height:500px; background:#FFFFFF; float:left; margin-right:5px;}
  6. #imageOptions{ float:left;}
  7. #imageOptions li{ list-style:none; margin:10px;}
  8. .loading{ background:url(images/spinner.gif) center center no-repeat;}
  9. h3{ line-height:500px;}
複製代碼
HTML code
  1. <div id="container">
  2.         <div id="loader">
  3.         <h3>Click on an image to view it full size.</h3>
  4.         </div>
  5.         <ul id ="imageOptions">
  6.                 <li><a href="#"><img width="200px" src="./uploads/20131251.jpg" alt="image" /></a></li>
  7.                 <li><a href="#"><img width="200px" src="./uploads/20131252.jpg" alt="image" /></a></li>
  8.                 <li><a href="#"><img width="200px" src="./uploads/20151213.jpg" alt="image" /></a></li>
  9.                 <li><a href="#"><img width="200px" src="./uploads/20160415netyea_banner1.jpg" alt="image" /></a></li>
  10.                 <li><a href="#"><img width="200px" src="./uploads/20160414netyea_banner5.jpg" alt="image" /></a></li>
  11.         </ul>
  12. </div>
複製代碼

JavaScript code
  1. $(function(){
  2.         $("#imageOptions a").click(function(){
  3.                 var imageSource = $(this).children("img").attr("src");
  4.                 $('#loader').addClass("loading");
  5.                 $("h3").remove();
  6.                 showImage(imageSource);
  7.                 return false;
  8.         });
  9. });
  10. function showImage(src)
  11. {
  12. $("#loader img").fadeOut("slow").remove();
  13. var largeImage = new Image();
  14. $(largeImage).attr("src",src)
  15.         .load(function(){
  16.                 $(largeImage).hide();
  17.                 $("#loader").removeClass("loading").append(largeImage);
  18.                 $(largeImage).fadeIn("slow");
  19.         });
  20. }
複製代碼
網頁設計


引用自:
arrow
arrow
    文章標籤
    網頁設計
    全站熱搜
    創作者介紹
    創作者 zahinjtsog256 的頭像
    zahinjtsog256

    桃園網頁設計

    zahinjtsog256 發表在 痞客邦 留言(0) 人氣()