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>
註：本範例所使用的圖片版權屬於微星科技公司所有。
write my social work essay
please write my essay for me
essay service cheap
When are you going to post again? You really entertain me!
https://datingtopreview.online/# free site for dating
https://datingtopreview.com/# best dating websites
Some truly nice stuff on this website , I like it.
lyrica 150 mg pills can you buy cheap pregabalin without prescription can i buy cheap pregabalin pill
pregabalin 150 mg pill pregabalin 150 mg usa pregabalin 75 mg price
generic cialis 5mg p values, Mann Whitney U test, n 8
cialis on sale in usa Sixteen week old C57BL 6 mice were SHAM or OVX on d 1
In addition, senior patients with dementia related psychosis should avoid Seroquel cialis online purchase prilosec metoprolol xl 25 He added that companies could still nominate any country they liked as their tax residence, including zero tax jurisdictions such as Bermuda a provision that tax advisers said was unusual internationally
sequences located at the 5 and 3 ends of the nucleic acid in the genomic DNA of the organism from which the nucleic acid is derived cialis with dapoxetine Coadministration of apalutamide, a weak CYP2C9 inducer, with drugs that are CYP2C9 substrates can result in lower exposure to these medications
The PAK4 interactome was enriched in known interactors, including the 14 3 3 family, but also revealed novel interactions such as most subunits of the chaperonin containing TCP 1 complex CCT complex and the Arp2 3 complex buy cialis without prescription com 20 E2 AD 90 20Viagra 20Efficace 20Combien 20De 20Temps 20 20Viagra 20Aspirin 20Kombinieren viagra aspirin kombinieren A shift back to corporate customers is no clear fix
отель империя в евпатории евпатория отзывы о гостиницах с детьми
гостиница татарстан абхазия санаторий детокс очищение эльбрус санаторий мвд официальный сайт
отель первая линия зеленогорск семейный отдых 2021 санаторий имени мориса тореза
Of the 117 subjects, eight applied the cream intravaginally only median 6 cialis 5 mg
However, the effect of progestins is highly variable and depends on their androgenicity and dose cialis super active There s a real heft to the cover based blasting taking clear inspiration from Rockstar stablemate Max Payne 3 while a selection of aiming assists allow gunfights to be tailored to your taste and ability
cost of generic pregabalin online where buy cheap lyrica without prescription where to buy generic lyrica tablets
easy essay help
write my essay affordable
college essay writers block
where buy generic lyrica how to get generic lyrica without a prescription cost of cheap pregabalin without insurance
санаторий знание адлер цены на 2021 кардиосанаторий в подмосковье
санаторий таврия евпатория официальный сайт пансионаты дагестана холидей инн симоновский вал
отдых гор ключ конференц зал ульяновск что лучше поезд или самолет отзывы
парк отель триумф карелия отзывы свет маяка керчь официальный
гостиницы норильск мираж поповка крым суздаль гостиница молодежная
отель березники пионерский проспект 45 углич как доехать из москвы
Woah this is just an insane amount of information, must of taken ages to compile so thanx so much for just sharing it with all of us. If your ever in any need of related information, just check out my own site!
PMID 35547996 Free PMC article cialis online ordering
easy essay help
custom my essay
essay paper writing service
отель дольче вита петропавловск камчатский лучший санаторий в крыму
дорохово можайск расписание электричек на сегодня сочи чистые пруды azimut новосибирск
гостиница novotel шереметьево гостевой дом на муезерской санатории в анапе с лечением органов дыхания
санаторий выходного дня пансионат надежда анапа
гостиница кунцево москва гостиница релакс нефтеюганск хостел сова иваново
отели 3 звезды москва таганка отель небуг санаторий молния
It sounds like you’re creating problems yourself by defining this as such a comprehensive, almost unknowable problem. Isn’t that self-defeating?
отели в челябинске недорого отдых с семьей в москве
санаторий дыхательных путей архипо осиповка роза ветров цены отель абхазия гагра
ахиллес и черепаха санкт петербург николаевка крым отдых с бассейном гостиница круиз великий новгород
cost cheap lyrica order lyrica order cheap lyrica without dr prescription