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>
註：本範例所使用的圖片版權屬於微星科技公司所有。
tories of CS비아그라 구매IR spread ac비아그라 구매ross India t비아그라 구매o de
비아그라 구매 비아그라 약국
비아그라 구매, 구입, 100%정품보장, 비밀배송, 고객만족도 1위, 비아그라 온라인 구매.
비아그라 종류
비아그라의 주요 종류
비아그라 온라인 구매
온라인에서 비아그라를 구매하는 것은 편리성, 익명성, 비용 절감, 접근성 등의 여러 가지 이유로 인해 많은 사람들이 선택하는 방법입니다.
조루증 예방방법, 나에게 맞는 조루치료 방법은?
조루증 예방 및 치료 방법: 나에게 맞는 조루 치료 방법
비아그라 가격 이해를 취한 최고의 가이드
비아그라 가격 이해를 취한 최고의 가이드: 비용에 영향을 미치는 요소는 무엇입니까?
buy nootropil 800mg – order nootropil 800 mg generic buy sinemet generic
rabbits and 비아그라 구매gives rise t비아그라 구매o antibacter비아그라 구매ial
비아그라 시알리스 강직도
강직도에서 만족으로: 비아그라와 시알리스가 친밀한 순간을 변화시키는 방법
트위터 계정 판매
트위터 계정 판매, 트위터 계정 매입, 판매 가격, 생성프로그램。
트위터 계정 구매, 트위터 계정 무한생성。
비아그라(실데나필)는 남성의 발기 부전 치료를 위해 사용되는 약물로, 주로 성적 기능 개선을 목적으로 사용됩니다. 비아그라의 작용 메커니즘은 혈관을 확장시켜 혈류를 증가시키는 것입니다.
부작용 없는 비아그라
구글 계정 판매
구글 계정 판매, 깡통계정, 생성 계정,구글 아이디 구매 사이트, 구글 계정 대량 판매.
비아그라 크기 변화
비아그라가 실제로 음경 크기에 영향을 미칩니까? 과학의 중요성
프릴리지 인터넷 구매
프릴리지 인터넷 구매를 위한 궁극의 가이드: 알아야 할 모든 것
약국에서 파는 비아그라
지역 약국에서 비아그라 구입의 장단전
hydroxyurea pills – buy methocarbamol without a prescription robaxin where to buy
비아그라 구매 비아그라 약국
비아그라 구매, 구입, 100%정품보장, 비밀배송, 고객만족도 1위, 비아그라 온라인 구매.
비아그라 크기 변화
비아그라와 남성 성기 크기: 사실과 오해
비아그라 복제약 가격이 저렴하지만
비아그라 복제약 가격: 저렴하지만 주의가 필요한 이유와 대안
이상적인 남자 크기
이상적인 남자 크기: 성적 만족을 위한 포괄적인 가이드
lives, suita비아그라 구매ble technolo비아그라 구매gies should 비아그라 구매be d
비아그라 구매 전 필요한 정보
비아그라 구매 전 필요한 정보: 발기 부전 치료와 관련된 모든 것
네이버아이디 판매 – 그린 아이디
아이디 간편 주문
구글 계정 판매
텔레그램 문의
카카오톡 상담
https://autolux-azerbaijan.com/# Pin up 306 casino
pin-up 141 casino: Pin Up – ?Onlayn Kazino
일본 비아그라 구매
일본에서 비아그라 구매를 위한 최고의 가이드: 팁과 요령
네이버 아이디 판매
네이버 아이디 판매. 네이버 아이디 구매. 네이버아이디매입. 네이버 아이디 판매 가격. 네이버 실명 아이디 구매.
https://autolux-azerbaijan.com/# Pin up 306 casino
?Onlayn Kazino: Pin Up Kazino ?Onlayn – Pin Up
For the firs비아그라 구매t time in In비아그라 구매dia, a coupl비아그라 구매ed p