24h購物| | PChome| 登入
2023-04-21 05:54:04| 人氣7| 回應0 | 上一篇 | 下一篇
推薦 0 收藏 0 轉貼0 訂閱站台

用jquery做相册 網站架設

網站架設

典範圖片

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. }
複製代碼


引用自:

我要檢舉
台長： gibsonwu3

您可能對以下文章有興趣

人氣(7) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 圖文創作(詩詞、散文、小說、懷舊、插畫) | 個人分類: NetYea |
此分類下一篇:網站架設 PHP如何毗連的SQLite數據庫
此分類上一篇:PHP燒毀函數ereg_replace()，若何用preg_

我要回應
否 是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼：
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文