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>
註：本範例所使用的圖片版權屬於微星科技公司所有。
atenolol usa – sotalol cheap order generic coreg 6.25mg
자주하는 질문
비아그라 구매에 관한 20개 자주하는 질문
레비트라
레비트라 이해: 용도, 이점 및 부작용에 대한 종합 가이드
비아그라 대체 약품의 부상
비아그라 대체 약품의 부상: 안전하고 효과적인 옵션 탐색
약국에 도착하면 처방전을 약사에게 제출하고 비아그라 구매할 의향을 밝힙니다. 약사는 처방전을 확인하고 비아그라를 제공합니다.
20대 비아그라
20대 젊은 남성의 비아그라 사용 급증
비아그라 제네릭
비아그라 제네릭에 대한 최고의 가이드: 알아야 할 사항
베트남 비아그라 구매
베트남에서 비아그라 구매 탐색: 여행자를 위한 가이드
buy minoxidil – purchase proscar pill cost proscar 5mg
비아그라(실데나필)와 관련된 최신 연구 결과들은 그 효과와 새로운 잠재적 사용법, 안전성 등을 다루고 있습니다. 비아그라와 관련된 최신 연구 결과
비아그라는 발기부전(ED, Erectile Dysfunction) 치료에 주로 사용되는 약물로, 성기능 개선과 관련하여 단기 및 장기적인 효과와 이점을 가지고 있습니다.
비아그라의 성적 효과와 장기적인 이점
20대 비아그라 처방
20대에 비아그라 처방이 필요한 이유
비아그라 시력
비아그라와 시력: 효과와 주의사항
비아그라(성분명: 실데나필)를 처음 복용하려는 사용자들을 위한 가이드를 제공합니다. 이 가이드는 비아그라를 안전하고 효과적으로 사용하는 데 도움이 됩니다.
비아그라 복용 가이드
구글 계정 판매
구글 계정 판매, 구글깡통계정 구매, 구글 계정 무한생성 vpn, 구글 깡통 계정 판매, 구글아이디 구매, 구글계정 대량 판매, 구글 계정 거래방법.
인스타 계정 판매
인스타계정 판매. 인스타 계정 구매. 인스타 계정 대량 판매. 인스타 아이디 구매.
인스타 계정 구매 사이트.인스타 계정 매입. 인스타 계정 거래.
네이버 아이디 구매 란?
네이버 플랫품에서 사용되는 아이디를 구매할 수 있습니다.
트위터 계정 판매
트위터 계정 판매, 트위터 계정 매입, 판매 가격, 생성프로그램。
트위터 계정 구매, 트위터 계정 무한생성。
arava 10mg pill – buy actonel 35 mg online cheap order generic cartidin
비아그라 유통기한
비아그라 유통기한의 중요성 이해
비아그라 코막힘
비아그라와 관련된 코막힘 현상은 남성들 사이에서 자주 논의되는 주제 중 하나입니다.
비아그라 2알 먹으면
비아그라 효과 극대화: 2알을 복용해도 안전한가요?
Welcome to Hard Rock Casino Northern Indiana “They want to come to see the guitar, now they’re going to come for more gambling,” said Hard Rock Hollywood President Bo Guidry. After an initial beta-testing phase, Hard Rock Casino Online is open for business to customers 21 and up located in New Jersey. You can test the demo-play games from out of state, but all real money play is restricted to within state lines as is the case for all NJ casino sites. Hard Rock is fully functional with all devices – PCs, Macs and mobile. Hard Rock Bet is also a hot spot for table games. As the name implies, this is a category of games being played on a table. These games can be operated by one or several croupiers. Table games are often played in land-based casinos, and their online variants offer an equally realistic experience. If you want an even more realistic experience, you can choose to play live dealer casino table games. Below are some of the common table games you can find at a Hard Rock casino.
https://landenijfa628495.bligblogging.com/28332587/best-cash-poker-online
When you’re ready to play for real money, take advantage of casino bonuses to build your bankroll. Online slots games have their own bonuses such as free spins and no deposit bonuses. With these, you can play free slots but win real money. Make sure to check the terms and conditions of all casino bonuses. But don’t rush. Feel free to explore our comprehensive list of top-rated online casinos in Massachusetts, and remember to avoid falling into the trap of gambling addiction. Always stick to responsible gambling and enjoy the thrill! When you’re ready to play for real money, take advantage of casino bonuses to build your bankroll. Online slots games have their own bonuses such as free spins and no deposit bonuses. With these, you can play free slots but win real money. Make sure to check the terms and conditions of all casino bonuses.
네이버 아이디 판매
네이버 아이디 판매, 비실명 아이디 구매, 네이버 아이디 구매, 최고의 품질 자랑하는 전문기업, 마케팅을 위한 네이버 아이디는 저희 행운아이디에서 책임지겠습니다.
비아그라 50mg
비아그라 50mg: 성적 능력 향상을 위한 안전하고 효과적인 해결책
비아그라 구매를 위한 궁극적인 가이드: 온라인 vs 오프라인
비아그라 구매 방법
tadalafil cialis from india nolvadex ciprofloxacin 500 mg tab aur
비아그라 구매를 위한 최고의 가이드: 알아야 할 사항
비아그라 구매
비아그라(성분명: 실데나필)를 처음 복용하려는 사용자들을 위한 가이드는 다음과 같습니다. 이 가이드는 비아그라를 안전하고 효과적으로 사용하는 데 도움이 될 것입니다.
비아그라 복용 가이드
발기부전의 검사와 치료방법
발기부전의 검사와 치료방법: 남성 건강을 위한 정보