TShopping
標題:
用jquery做相册
[打印本頁]
作者:
woff
時間:
2019-7-18 23:02
標題:
用jquery做相册
範例圖片
1.png
(190.7 KB, 下載次數: 6)
下載附件
保存到相冊
jquery 相册
2019-7-18 23:03 上傳
CSS
body{ text-align:center;}
*{ margin:0; padding:0;}
img{ border:none;}
#container{ width:900px; height:900px; background:#000000; border:1px solid #006633; margin:auto; padding:0;}
#loader{ width:480px; margin:auto; height:500px; background:#FFFFFF; float:left; margin-right:5px;}
#imageOptions{ float:left;}
#imageOptions li{ list-style:none; margin:10px;}
.loading{ background:url(images/spinner.gif) center center no-repeat;}
h3{ line-height:500px;}
複製代碼
HTML code
<div id="container">
<div id="loader">
<h3>Click on an image to view it full size.</h3>
</div>
<ul id ="imageOptions">
<li><a href="#"><img width="200px" src="./uploads/20131251.jpg" alt="image" /></a></li>
<li><a href="#"><img width="200px" src="./uploads/20131252.jpg" alt="image" /></a></li>
<li><a href="#"><img width="200px" src="./uploads/20151213.jpg" alt="image" /></a></li>
<li><a href="#"><img width="200px" src="./uploads/20160415netyea_banner1.jpg" alt="image" /></a></li>
<li><a href="#"><img width="200px" src="./uploads/20160414netyea_banner5.jpg" alt="image" /></a></li>
</ul>
</div>
複製代碼
JavaScript code
$(function(){
$("#imageOptions a").click(function(){
var imageSource = $(this).children("img").attr("src");
$('#loader').addClass("loading");
$("h3").remove();
showImage(imageSource);
return false;
});
});
function showImage(src)
{
$("#loader img").fadeOut("slow").remove();
var largeImage = new Image();
$(largeImage).attr("src",src)
.load(function(){
$(largeImage).hide();
$("#loader").removeClass("loading").append(largeImage);
$(largeImage).fadeIn("slow");
});
}
複製代碼
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2