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>
註：本範例所使用的圖片版權屬於微星科技公司所有。
https://funny-owl-dc4vll.mystrikingly.com/blog/4d2be1601a5
https://naveridbuy.blogspot.com/2024/07/blog-post_6.html
https://t.me/iv?url=https://%ED%8C%8C%EC%9B%8C%EB%A7%A8.mystrikingly.com/
https://orange-onion-dc4vln.mystrikingly.com/blog/8152bf9bdbd
prednisone 20mg prescription cost https://prednisonebestprice.pro/# where can i buy prednisone without a prescription
where to get prednisone
https://just-coconut-dc4vlw.mystrikingly.com/blog/656a2c516f0
https://xn--oy2bo9bg4imgm5ikup.mystrikingly.com/blog/499cd87d679
https://xn--fx-hd0jg6f81ltjas9lbns.mystrikingly.com/blog/4e9937cd8b9
https://xn--zg-hd0j5a097plop.mystrikingly.com/blog/7717ee44948
https://viastoer.blogspot.com/2024/07/blog-post_33.html
https://xn--go-2e2i723b91ktjas9l307b.mystrikingly.com/blog/97d7a2b8dc5
https://www.producthunt.com/@naveridbuy
where to buy nolvadex: tamoxifen bone density – tamoxifen skin changes
Online casino real money PayPal websites come in all shapes and sizes, so if you feel challenged by the registration process of a casino account, you can get extensive customer support guidance over a live chat. It’s quite similar to when you have difficulties making a bank transfer at a sports betting site in the US. Casinos PayPal has got US players covered, no matter what the issue – casino bonus-related, or you maybe you are just a new PayPal user. There are also plenty of new PayPal casinos for US players you may want to create a casino account at. The online casinos that accept PayPal are: BetMGM Casino, Borgata Casino, PartyCasino, DraftKings Casino, Hard Rock Casino, Unibet Casino, and Harrah’s Casino. PayPal’s popularity among online casino players stems largely from the fact that it’s one of the fastest and most convenient banking options available to them. With PayPal, withdrawals from online casinos only take a maximum of 24 hours to be processed. Your funds are then available on your PayPal account from which you can then withdraw your funds to your bank account, should you want to.
https://archerwxwv641964.blogsumer.com/27376470/governor-of-poker-3-coupons
Unleash all your casino and gambling passion with Full House Casino, the app that contains lots of slots and casino tables. You won’t be able to win real money, but there are tons of poker, blackjack, baccarat and roulette, among many other games, waiting for you. Since online casinos don’t have the same overheads as their land-based counterparts, they can afford to give generous bonuses to their players. Sometimes, you can find mobile-specific prizes or even iPhone specific bonuses. However, these are rare. The majority of the welcome bonuses and other promotions mobile casinos offer are the same as the general casino bonuses for Filipinos. A mobile casino wouldn’t be very convenient if you couldn’t also use it to manage your account – specifically, your bankroll. Luckily, the top sites make that easy. All casino deposit methods and casino payout methods – except for lesser used options like bank wires and cashier’s checks – are readily accessible via iPhone.
https://medium.com/@nsw5288/%EB%B9%84%EC%95%84%EA%B7%B8%EB%9D%BC-%EA%B5%AC%EB%A7%A4-%ED%9B%84-%EC%A3%BC%EC%9D%98%EC%82%AC%ED%95%AD%EA%B3%BC-%EA%B4%80%EB%A6%AC%EB%B2%95-ad11b050b9a8
https://www.bluebirdbanter.com/users/shepparduvg897
https://xn--kk-ro2i3ru49at1jokm7ma.mystrikingly.com/blog/ae87512970e
https://faithful-elk-dc4vlw.mystrikingly.com/blog/01cd05ef7be
비아그라(실데나필)를 사용하여 발기부전을 치료하면서도 건강하고 만족스러운 성적 삶을 유지하기 위한 조언을 제공하겠습니다. 이는 비아그라의 효과를 극대화하고 전반적인 성적 건강을 증진하는 데 도움이 될 것입니다.
비아그라 복용법 및 효과 지속시간 처방방법 알아보죠
비아그라(VIAGRA)100mg
https://indigo-gnu-dc4vlm.mystrikingly.com/blog/73ae9844d2d
비아그라 약국 가격
비아그라 약국 가격에 대한 진실: 가격이 다른 이유와 비용을 절약하는 방법
purchase hytrin without prescription – tamsulosin sale dapoxetine for sale online
비아그라 구매 사기 방지하는 방법
비아그라 구매 사기 방지: 안전한 구매를 위한 전략
https://xn--zb-hd0j5a097plop.mystrikingly.com/blog/c9357ae72f4
비아그라 먹으면 크기
비아그라 복용과 남성 성기 크기: 사실과 오해
https://inky-onion-dc4vlq.mystrikingly.com/blog/33da14ec78d
약국에서 파는 비아그라
지역 약국에서 비아그라 구입의 장단전
비아그라 치매
비아그라가 치매를 예방할 수 있습니까? 놀라운 연결
https://doodleordie.com/profile/naveridbuy