中壢網頁設計
跳到主文
中壢網頁設計
部落格全站分類:
不設分類
相簿
部落格
留言
名片
Feb
28
Wed
2024
09:42
網頁設計 用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");
});
}
複製代碼
類型圖片
以下文章來自:
文章標籤
網頁設計
全站熱搜
創作者介紹
victorjod6q
中壢網頁設計
victorjod6q 發表在
痞客邦
留言
(0)
人氣(
)
留言列表
發表留言
站方公告
[公告] 「行動管家」APP 已於 2024 年 5 月 22 日下架
[公告] 「新型態文章」已於 2024 年 6 月 28 日終止服務
[公告] PIXwallet 錢包取消支票寄送暨服務條款異動通知
活動快報
遊山玩水趁現在!
來玩遊戲就有機會拿到墾丁雙人住宿券!還有統一集團...
看更多活動好康
我的好友
熱門文章
文章分類
NetYea (129)
最新文章
最新留言
動態訂閱
文章精選
文章精選
2024 六月 (12)
2024 三月 (102)
2024 二月 (15)
所有文章列表
文章搜尋
新聞交換(RSS)
誰來我家
參觀人氣
本日人氣:
累積人氣:
QR Code
POWERED BY
(登入)
關閉視窗
留言列表