jQuery Plugin – jQzoom

今天馬老師來介紹一個微星科技的網頁有利用到的技術 – 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>

註:本範例所使用的圖片版權屬於微星科技公司所有。

You may also like...

5,884 Responses

  1. CharlesDog表示:

    http://cenforce.pro/# cenforce.pro

  2. CharlesDog表示:

    http://viagras.online/# cheapest viagra

  3. ElmerWes表示:

    Kamagra 100mg price п»їkamagra Kamagra 100mg price

  4. JamesNow表示:

    Kamagra 100mg price: super kamagra – kamagra

  5. GeorgeSep表示:

    п»їkamagra: kamagra – buy kamagra online usa

  6. ElmerWes表示:

    cenforce.pro cenforce for sale Buy Cenforce 100mg Online

  7. DavidOwelo表示:

    https://kamagra.win/# Kamagra Oral Jelly

  8. CharlesDog表示:

    https://viagras.online/# Viagra generic over the counter

  9. DavidOwelo表示:

    https://cenforce.pro/# Cenforce 100mg tablets for sale

  10. ElmerWes表示:

    buy cialis pill Cialis 20mg price in USA Cheap Cialis

  11. CharlesDog表示:

    http://cialist.pro/# Cialis without a doctor prescription

  12. Vuiico表示:

    nitroglycerin price – order valsartan buy generic valsartan 160mg

  13. JamesNow表示:

    buy Kamagra: Kamagra 100mg – sildenafil oral jelly 100mg kamagra

  14. ElmerWes表示:

    Cenforce 150 mg online Buy Cenforce 100mg Online Cenforce 100mg tablets for sale

  15. WilliamRhype表示:

    https://cytotec.club/# Cytotec 200mcg price

  16. Davidtes表示:

    buy cytotec pills online cheap Abortion pills online buy cytotec in usa

  17. RandallTaulp表示:

    ciprofloxacin 500 mg tablet price: purchase cipro – cipro generic

  18. WilliamRhype表示:

    https://lisinopril.network/# lisinopril drug

  19. Stkxvd表示:

    buy lopressor 100mg sale – order benicar 10mg pill buy adalat tablets

  20. Davidtes表示:

    tamoxifen citrate raloxifene vs tamoxifen tamoxifen premenopausal

  21. Ronaldpsymn表示:

    https://ciprofloxacin.tech/# buy cipro online canada

  22. WilliamRhype表示:

    http://finasteride.store/# order propecia without prescription

  23. Davidtes表示:

    order generic propecia cost propecia tablets cost of propecia tablets

  24. Ronaldpsymn表示:

    http://ciprofloxacin.tech/# buy cipro online

  25. RandallTaulp表示:

    buy propecia online: cost generic propecia online – how cÉ‘n i get cheap propecia pills

  26. WilliamRhype表示:

    https://finasteride.store/# order cheap propecia without prescription

  27. Davidtes表示:

    tamoxifen depression tamoxifen vs raloxifene tamoxifen endometriosis

  28. Davidtes表示:

    cipro ciprofloxacin buy ciprofloxacin over the counter buy generic ciprofloxacin

  29. WilliamRhype表示:

    http://nolvadex.life/# tamoxifen endometrium

  30. 술이 몸에 미치는 영향과 비아그라의 의도된 효과를 이해함으로써 자신의 성적 경험을 향상시키는 책임감 있는 선택을 할 수 있습니다. 비아그라를 복용하면서 술을 마시는 것을 선택했다면, 적당히 하고 몸의 반응을 염두에 두어야 합니다.

    술먹고 비아그라 먹으면

發佈回覆給「ElmerWes」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。