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...

3,064 Responses

  1. I think other web-site proprietors should take this site as an model, very clean and great user genial style and design, as well as the content. You’re an expert in this topic!

  2. AABAKAWLBIXsi表示:

    where to buy lyrica no prescription get lyrica no prescription can you buy cheap lyrica

  3. Timothyquarm表示:

    Hello2. And Bye2.

  4. Vivienepisn表示:

    college essay writing help
    essay writers toronto
    write my essay students

  5. I like meeting utile info, this post has got me even more info!

  6. gacorslot表示:

    Your posts provide a clear, concise description of the issues.

  7. PABAKAWLBIXsl表示:

    can i order cheap lyrica no prescription where can i buy lyrica without dr prescription where to buy generic lyrica price

  8. ascetacle表示:

    bumex to lasix conversion rifampin will decrease the level or effect of diazepam intranasal by affecting hepatic intestinal enzyme CYP3A4 metabolism

  9. PABAKAWLBIXcb表示:

    where to get lyrica buy cheap lyrica no prescription where buy lyrica without dr prescription

  10. piopary表示:

    Effects of catechin enriched green tea beverage on visceral fat loss in adults with a high pro portion of visceral fat A double blind, placebo controlled, randomized trial, Journal of Functional Foods 2012, doi 10 how to deal with a dog on lasix Yoshizawa, I

  11. ascetacle表示:

    There was no significant difference in disease free survival between the anastrozole and tamoxifen groups hazard ratio for disease progression in the anastrozole group, 1 lasix drug 44 Although the Supreme Court of Colorado did not allow a drug testing policy to extend to students in any extracurricular activity, and the Joy court had some of the same misgivings, the decisions in Todd and Lopez demonstrate that some courts will allow such policies to remain in place by explicitly following the Supreme Court s Vernonia decision

  12. scb99表示:

    I found your blog through google and I must say, this is probably one of the best well prepared articles I have come across in a long time. I have bookmarked your site for more posts.

  13. Weageby表示:

    The primary PCa is usually treated with conventional treatment methods such as surgery and radiotherapy 226, 227 is it safe to take lasix while pregnant More extensive surgery is not useful

  14. Weageby表示:

    how do you spell lasix APE1 is overexpressed in several solid tumors and contributes to spontaneous and chemotherapy induced genomic instability

  15. piopary表示:

    2 Key Market Segments 1 lasix action

  16. Ginniepisn表示:

    best essay writers online
    help me write an essay
    cheap custom essays

  17. LABAKAWLBIXyo表示:

    oral pregabalin lyrica order online order lyrica 150 mg for sale

  18. LABAKAWLBIXbh表示:

    brand lyrica 75 mg order lyrica without prescription buy pregabalin 150 mg online

  19. Ginniepisn表示:

    student essay help
    write my admission essay
    help writing college essays

  20. sbobet表示:

    Regards for helping out, superb info.

  21. DABAKAWLBIXsy表示:

    buy neurontin 400 mg pill cheap gabapentin 100 mg neurontin 400 mg cost

  22. DABAKAWLBIXgq表示:

    gabapentin 100 mg price buy gabapentin 100 mg pill buy neurontin 400 mg pills

  23. quotes表示:

    radha krishna good morning quotes

  24. Ginniepisn表示:

    essay writing homework help
    best writing essay
    cheap essay writer service

  25. Gun for sale表示:

    Thank you for sharing indeed great looking !

  26. Write more stories, more chapters.

  27. VABAKAWLBIXrw表示:

    purchase valsartan pill cost diovan buy diovan generic

  28. VABAKAWLBIXza表示:

    diovan 80 mg for sale order valsartan pills buy diovan 80 mg online cheap

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

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