TShopping

 找回密碼
 註冊
搜索
查看: 1766|回復: 0

[分享] 用jquery做相册

[複製鏈接]
發表於 2019-7-18 23:02:34 | 顯示全部樓層 |閱讀模式
 
Push to Facebook
範例圖片

jquery 相册

jquery 相册


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



 

臉書網友討論
*滑块验证:
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2024-3-29 04:57 , Processed in 0.085045 second(s), 26 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表