jQuery Plugin – jQzoom
今天馬老師來介紹一個微星科技的網頁有利用到的技術 – jQzoom，大家可以先到微星的官網參考這個效果
現在的網頁已經儘可能的把一些不需要使用Flash的地方，利用Javascript、CSS或HTML5的技術取代，這樣不斷可以減輕網頁的負載和流量，更可以達到SEO（搜尋引擎最佳化）的效果。
所以因應而生的jQuery相關技術作品就越來越多了，好吧！廢話不多說，請看馬老師製作的範例頁面與範例檔案下載，這個範例應用到的網頁程式碼和說明如下，大家可以參考我所輸入的一些註解來更改成自己想要的形式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQzoom Sample</title>
<script type="text/javascript" src="js/jquery-1.6.js"></script>
<script type="text/javascript" src="js/jquery.jqzoom-core.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqzoom.css">
<style type="text/css">
*{margin:0;padding:0;}/* 把HTML中所有邊界和填充歸零 */
#layout{margin-left:auto;margin-right:auto;width: 500px;}/* 定義主板面寬度和置中 */
#big {width: 500px; height:350px;}/* 定義大圖版面寬、高 */
#small {width: 500px; height:100px;}/* 定義小圖版面寬、高 */
ul#thumblist{display:block;}/* 定義超連結清單顯示方式 */
ul#thumblist li{float:left;margin-right:2px;list-style-image: none;list-style-type: none;}/* 定義清單項目浮動、間距、不顯示項目符號與圖片 */
ul#thumblist li a{display:block;border:1px solid #CCC;}/* 定義超連結項目顯示方式、邊框 */
ul#thumblist li a.zoomThumbActive{border:1px solid red;}/* 定義目前檢視項目邊框，套用在第一張縮圖上（本類別為js使用，更換名稱後會失去效果） */
.jqzoom{float:left; text-decoration:none;}/* 套用在欲放大顯示的圖片連結上（本類別為js使用，更換名稱後會失去效果） */
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.jqzoom').jqzoom({zoomType: 'reverse',alwaysOn:false,zoomWidth:400,zoomHeight:324,showEffect:'fadein'});
});
/*
放大顯示照片效果設定共有以下選項可修改
zoomType：共有standard、reverse、drag、innerzoom四種效果（預設值standard）
zoomWidth：照片放大顯示區域寬（預設值300）
zoomHeight：照片放大顯示區域高（預設值300）
xOffset：放大顯示區域橫向位移（預設值10）
yOffset：放大顯示區域縱向位移（預設值0）
position：放大顯示區域位置，可以使用right,left,top,bottom這些設定（預設值right）
preloadImages：如果設定成true，會在網頁載入時會預先把所有大張的圖片都預先載入進來（預設值true）
preloadText：載入中顯示的文字（預設值：Loading zoom）
title：如果設定成true，會在放大顯示區域上方顯示圖片的title（預設值：true）
lens：如果設定成true，會在滑鼠移動時顯示放大區域範圍（預設值：true）
imageOpacity：設定圖像的不透明度，需將zoomType設定成reverse模式（預設值：0.4）
showEffect：設定放大區塊的淡入效果，共有show,fadein這兩個效果（預設值：show）
hideEffect：設定放大區塊的淡出效果，共有hide,fadeout這兩個效果（預設值：hide）
fadeinSpeed：設定淡入效果速度，可以使用fast,slow或輸入數值來控制（預設值：slow）
fadeoutSpeed：設定淡出效果速度，可以使用fast,slow或輸入數值來控制（預設值：2000）
*/
</script>
</head>
<body>
<div id="layout">
<div id="big">
<a class="jqzoom" href="images/big/msi_b1.jpg" title="微星筆記型電腦" rel='msi'><img src="images/small/msi_s1.jpg" width="400" height="320" title="微星筆記型電腦側面照" style="border: 3px solid #666;" /></a>
</div>
<div id="small">
<ul id="thumblist">
<li class="zoomThumbActive"><a href='javascript:void(0);' rel="{gallery: 'msi', smallimage: 'images/small/msi_s1.jpg',largeimage: 'images/big/msi_b1.jpg'}">
<img src="images/thumbnail/msi_t1.jpg" width="70" height="56" /></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'msi', smallimage: 'images/small/msi_s2.jpg',largeimage: 'images/big/msi_b2.jpg'}">
<img src="images/thumbnail/msi_t2.jpg" width="70" height="56" /></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'msi', smallimage: 'images/small/msi_s3.jpg',largeimage: 'images/big/msi_b3.jpg'}">
<img src="images/thumbnail/msi_t3.jpg" width="70" height="56" /></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'msi', smallimage: 'images/small/msi_s4.jpg',largeimage: 'images/big/msi_b4.jpg'}">
<img src="images/thumbnail/msi_t4.jpg" width="70" height="56" /></a></li>
<li><a href='javascript:void(0);' rel="{gallery: 'msi', smallimage: 'images/small/msi_s2.jpg',largeimage: 'images/big/msi_b5.jpg'}">
<img src="images/thumbnail/msi_t5.jpg" width="70" height="56" /></a></li>
</ul>
</div>
</div>
</body>
</html>
註：本範例所使用的圖片版權屬於微星科技公司所有。
비아그라 치매
비아그라와 치매: 실제 연관성과 과학적 이해
자주하는 질문
비아그라 구매에 관한 20개 자주하는 질문
고혈압 비아그라 같은 약 복용 시 고려사항
고혈압과 비아그라 복용 시 주의사항과 안전한 사용법
네이버 아이디 판매
이미 계정 활성화가 되여 있으므로 직접 로그인하고 이용가능합니다.
개인, 비지니스 목적으로 홍보 등을 하는데 도움이 됩니다.
비아그라 제네릭
비아그라 제네릭: 효과, 이점, 그리고 주의사항
프릴리지 인터넷 구매
프릴리지 인터넷 구매를 위한 궁극의 가이드: 알아야 할 모든 것
비아그라 지속시간
비아그라 효과 극대화: 지속시간 연장 팁
네이버 아이디 구매 란?
네이버 플랫품에서 사용되는 아이디를 구매할 수 있습니다.
비아그라 구매방법 의사 상담부터 온라인 구매까지
성적 기능 장애는 남성들 사이에서 흔히 발생하는 문제 중 하나입니다. 이런 문제에 대처하기 위해 비아그라와 같은 약물이 널리 사용되고 있습니다. 그러나 비아그라는 처방전이 필요한 약물로 분류되어 있기 때문에, 올바른 절차를 따라 구매해야 합니다.
비아그라 먹으면 안되는 사람
비아그라를 먹을 수 없는
비아그라 시알리스 효능 비교하면
비아그라와 시알리스의 효과 비교: 어떤 것이 더 나은 선택일까?
처방전 필요없는 비아그라
처방전 없이 비아그라를 구입하는 것의 위험과 이점
비아그라 100mg 가격
비아그라를 약국에서 별도로 구매하는 비용도 5000원~10000원 정도 듭니다.
cyclobenzaprine cost – olanzapine 10mg generic vasotec 5mg over the counter
비아그라 부작용 눈
비아그라에 대한 진실: 눈에 대한 잠재적인 부작용 탐색
풀발 되는법
풀발을 유지하고 강과하는 방법
네이버 아이디 판매
네이버 아이디 판매, 비실명 아이디 구매, 네이버 아이디 구매, 최고의 품질 자랑하는 전문기업, 마케팅을 위한 네이버 아이디는 저희 행운아이디에서 책임지겠습니다.
buy zofran 8mg for sale – cheap generic selegiline requip cost
비아그라 시알리스 동시 복용
비아그라와 시알리스 동시 복용: 효과, 위험성, 그리고 주의사항
고품질의 정통 의약품을 제공한다는 평판을 바탕으로 비아그라 store은 귀하의 건강과 만족을 최우선으로 생각합니다.
회사소개
처방전 필요없는 비아그라
처방전 없이 비아그라를 구입하는 것의 위험과 이점
비아그라 간수치
비아그라가 간 기능에 미치는 영향 이해
15cm 여자 반응
15cm인 만족시키는 여부
시알리스 비아그라 차이
시알리스와 비아그라의 주요 차이점 이해
남자 강직도 존중과 조화 유지하기
남자 강직도 존중과 조화 유지하기
발기부전의 검사와 치료방법
발기부전의 검사와 치료방법: 남성 건강을 위한 정보
20대 비아그라
20대와 비아그라: 이해하고 올바르게 사용하는 방법
비아그라 먹으면 안되는 사람
비아그라를 먹을 수 없는
비아그라 구입 병원
병원에서의 비아그라: 환자에게 안전하고 효과적인가?
비아그라 고혈압
비아그라와 고혈압: 효과와 주의사항