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>
註：本範例所使用的圖片版權屬於微星科技公司所有。
비아그라 한알 가격
비아그라 비용에 대한 진실: 알약당 가격 이해
비아그라 효능 시간
비아그라 작용하기 시작하는 데 걸리는 시간은 개인따라 달라질 수 있습니다.
Take your football betting to the next level with our top-notch h2h analysis, expert tipsters, and proven winning strategies. We offer comprehensive insights and reliable predictions to help you make informed bets and achieve maximum returns. Join our community of savvy bettors today and start winning big! If you’re ready to start winning your soccer bets with expertly crafted and dependable soccer predictions, join nearly half a million other subscribers by signing up for my free newsletter and receiving my free picks delivered directly to your inbox. 1×2: 1×2 is a type of bet where you predict the outcome of a match. The “1” stands for the home team to win, “x” stands for the match to end in a draw, and “2” stands for the away team to win. For example, if you bet on “1” and the home team wins, your bet is a winner. If you bet on “2” and the away team wins, your bet is a winner. If you bet on “x” and the match ends in a draw, your bet is a winner.
https://leedirectory.com/listings12743088/is-1xbet-legal
In the aftermath of India banning TikTok, ByteDance had to scale back its operations. Earlier this year, the company’s music streaming service, Resso, was also shut down in India after the government asked app stores to pull the app. To begin betting and gaming at the casino, you must first register. There is nothing complicated about it, because there are 4 ways to register at 1xbet: 1xBet is a reputable and safe online casino with a variety of game alternatives such as Aviator. The casino regularly offers new players a welcome bonus and other incentives. You can contact 1xBet customer service at any time via live chat, phone or email. Read also: How to Load the Booking Code on the 1xbet App Simply type in the box how much you want to convert. iOS and Android download of the 1xBet mobile app lets you watch certain matches live if you’ve logged into the app. The app has clear graphics in a super high-quality picture, and you can watch the games while you bet.
처방전 필요없는 비아그라
처방전 없이 비아그라를 구입하는 것의 위험과 이점
비아그라 처방
비아그라 처방전 받기에 관한 모든 것: 알아야 할 사항
조루증 예방방법, 나에게 맞는 조루치료 방법은?
조루증 예방 및 치료 방법: 나에게 맞는 조루 치료 방법
필름형 비아그라
"필름형 비아그라: 성생활 만족도를 높이는 최신 기술"
태국 비아그라 구매
태국에서 비아그라 구매의 위험과 이점 탐색
비아그라 효과없음
비아그라가 효과가 없습니까?알아야 할 사항은 다음과 같습니다.
비아그라 성기능 개선
비아그라와 그 이상: 성기능 향상의 회신 기술 탐색
발기부전 치료제
상위 5가지 발기부전 치료제 공개: 종합 가이드
구글 계정 판매
구글 계정 판매, 구글깡통계정 구매, 구글 계정 무한생성 vpn, 구글 깡통 계정 판매, 구글아이디 구매, 구글계정 대량 판매, 구글 계정 거래방법.
인스타 계정 판매
인스타계정 판매. 인스타 계정 구매. 인스타 계정 대량 판매. 인스타 아이디 구매.
인스타 계정 구매 사이트.인스타 계정 매입. 인스타 계정 거래.
구글 계정 판매
구글 계정 판매, 깡통계정, 생성 계정,구글 아이디 구매 사이트, 구글 계정 대량 판매.
트위터 계정 판매
트위터 계정 판매, 트위터 계정 매입, 판매 가격, 생성프로그램。
트위터 계정 구매, 트위터 계정 무한생성。
네이버 아이디 구매 란?
네이버 플랫품에서 사용되는 아이디를 구매할 수 있습니다.
네이버 아이디 구매
네이버 아이디 구매,네이버 아이디 판매 ,네이버 아이디 구매,네이버아이디매입,네이버 아이디 판매
네이버 아이디 구매 naver
네이버는 대한민국의 포털 사이트로, 검색 엔진, 뉴스, 온라인 커뮤니티, 동영상 서비스, 블로그, 카페 등 다양한 컨텐츠를 제공하는 대표적인 웹 포털 중 하나입니다.
한번 할때 몇분
친밀감의 과학: 성적 만족을 위한 이상적인 기간 탐색
d sillimanit비아그라 구매e. The miner비아그라 구매als are sepa비아그라 구매rate
비아그라 구매를 위한 궁극적인 가이드: 온라인 vs 오프라인
비아그라 구매 방법
비아그라 효과 없음
비아그라 효과가 없을 때 고려해야 할 사항과 대처 방법
비아그라 커피
비아그라와 커피: 성기능과 활기를 위한 미묘한 연결
비아그라 먹으면 크기
비아그라 복용과 남성 성기 크기: 사실과 오해
자주하는 질문
비아그라 구매에 관한 20개 자주하는 질문
buy dapagliflozin 10mg online cheap – dapagliflozin 10mg sale precose sale
비아그라 영양제
비아그라와 영양제: 성병적 건강을 위한 종합적 관리
비아그라 처방 받는법
비아그라 처방 받는 방법: 단계별 안내
cost zovirax – order hydroquinone without prescription duphaston tablet
비아그라 크기 변화
비아그라와 남성 성기 크기: 사실과 오해