新竹網頁設計
跳到主文
新竹網頁設計
部落格全站分類:
不設分類
相簿
部落格
留言
名片
May
08
Mon
2023
12:16
用jquery做相册
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");
});
}
複製代碼
類型圖片
來自:
文章標籤
網頁設計
全站熱搜
創作者介紹
antoniojonesu
新竹網頁設計
antoniojonesu 發表在
痞客邦
留言
(0)
人氣(
)
留言列表
發表留言
站方公告
[公告] 2024/07/01 ibon 繳費系統維護通知
[公告] 「行動管家」APP 已於 2024 年 5 月 22 日下架
[公告] 「新型態文章」將於 2024 年 6 月 28 日終止服務
活動快報
遊山玩水趁現在!
來玩遊戲就有機會拿到墾丁雙人住宿券!還有統一集團...
看更多活動好康
我的好友
熱門文章
文章分類
NetYea (83)
最新文章
最新留言
動態訂閱
文章精選
文章精選
2023 六月 (4)
2023 五月 (24)
2023 四月 (55)
所有文章列表
文章搜尋
新聞交換(RSS)
誰來我家
參觀人氣
本日人氣:
累積人氣:
QR Code
POWERED BY
(登入)
關閉視窗