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>
註：本範例所使用的圖片版權屬於微星科技公司所有。
Наткнулся на замечательный интернет-магазин, специализирующийся на раковинах и ваннах. Решил сделать ремонт в ванной комнате и искал качественную сантехнику по разумным ценам. В этом магазине нашёл всё, что нужно. Большой выбор раковин и ванн различных типов и дизайнов.
Особенно понравилось, что они предлагают раковины цена. Цены доступные, а качество продукции отличное. Консультанты очень помогли с выбором, были вежливы и профессиональны. Доставка была оперативной, и установка прошла без нареканий. Очень доволен покупкой и сервисом, рекомендую!
Профессиональный сервисный центр по ремонту компьютерных блоков питания в Москве.
Мы предлагаем: ремонт блоков питания corsair
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Bienvenue sur notre blog, votre lieu ultime pour les actualites sur les stars africaines du monde des mediums et des emissions de realites televisees https://mediaeventhub.africa/naledi-willers-surmonte-les-difficultes-sous-les.html ! Des dernieres tendances dans l’industrie du show business africain aux potins les plus epices sur les stars, nous vous informerons de toutes les anecdotes captivantes a travers le continent. Que ce soit des alliances musicales pertinentes, de instants intenses dans les emissions de tele-realite, ou de parcours personnels emouvants de vos stars preferees, nous couvrons tout. La scene du loisir en Afrique est pleine de talents, et notre blog est la pour vous amener plus pres des legendes qui faconnent l’industrie.
Les emissions de tele-realite africaines ont conquis le monde, mettant en lumiere la multiplicite culturelle, la imagination et l’originalite uniques du sol africain. Des emissions comme « Frere Naija », « Les Real Housewives de Lagos » et « Tentations Afrique du Sud » suscitent l’interet de des audiences massives, inspirant des discussions et attirant des fans bien a l’exterieur de l’Afrique. Nous explorons dans les situations complexes, les relations et les periodes incontournables qui font de ces spectacles des phenomenes a la tele. Notre blog ne se contente pas de commenter stars, mais analyse l’impact culturel de ces projets, montrant le rayonnement de la pop culture africaine a l’echelle globale.
Notre blog met egalement en lumiere les stars des medias et les nouvelles figures qui font parler d’eux en Afrique. Des interpretes doues aux figures influentes, en incluant les influenceurs sur les sites de reseautage, nous mettons a l’honneur les performances de ceux qui reinventent le divertissement sur le territoire. Cela comprend des roles primes dans les productions de Nollywood, des apparitions marquantes dans des fictions mondiales ou des actes courageux dans des videoclips, nous vous presentons des confidences speciales et des histoires au-dela de la gloire. Vous trouverez des profils de legendes africaines comme Bonang Matheba, qui ont non seulement gagne les audiences africaines, mais aussi atteint une reconnaissance mondiale.
Restez connectes avec nous pour les dernieres nouvelles et nouveautes en primeur sur vos celebrites africaines. Notre blog est un espace pour les fous de la culture populaire qui souhaitent ne rien manquer avec les scandales des celebrites, les projets a l’affiche et les mouvements artistiques qui changent l’industrie. Si vous etes un fan passionne de la culture populaire africaine ou un lecteur occasionnel des nouvelles du spectacle, notre blog vous offre de vous tenir informe, distrait et eveille par le milieu en ebullition des plateformes mediatiques et shows de realites televisees en Afrique.
https://hallbook.com.br/blogs/300837/%EB%B9%84%EC%95%84%EA%B7%B8%EB%9D%BC-%EC%B2%98%EB%B0%A9%EC%A0%84-%EC%97%86%EC%9D%B4-%EA%B5%AC%EB%A7%A4%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EA%B3%BC-%EB%A6%AC%EC%8A%A4%ED%81%AC
https://gatesofolympusoyna.online/# gates of olympus giris
https://xn--xe-o02ik82a7zcx14adgk.mystrikingly.com/blog/9c4f8293540
starz bet giris starzbet guncel giris starzbet guncel giris
https://peaceful-mushroom-dc4vlm.mystrikingly.com/blog/651c797f397
https://xn--jw-o02ik82a9jc69ko8mqkg.mystrikingly.com/blog/38a9689250f
Профессиональный сервисный центр по ремонту компьютероной техники в Москве.
Мы предлагаем: ремонт компьютера в москве
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
https://medium.com/@nsw5288/%EB%B9%84%EC%95%84%EA%B7%B8%EB%9D%BC-%EA%B5%AC%EB%A7%A4%EC%99%80-%EA%B4%80%EB%A0%A8%EB%90%9C-%EC%A3%BC%EC%9A%94-%EC%A7%88%EB%AC%B8%EA%B3%BC-%EB%8B%B5%EB%B3%80-552ce203761b
Профессиональный сервисный центр по ремонту фото техники от зеркальных до цифровых фотоаппаратов.
Мы предлагаем: цены на ремонт проекторов
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
betine guncel betine guncel betine
Профессиональный сервисный центр по ремонту фототехники в Москве.
Мы предлагаем: ремонт фотовспышек на дому
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Подробнее на сайте сервисного центра remont-vspyshek-realm.ru
Профессиональный сервисный центр по ремонту компьютероной техники в Москве.
Мы предлагаем: ремонт компьютеров москва
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
https://tapas.io/shepparduvg897
http://casibom.auction/# casibom
Профессиональный сервисный центр по ремонту фототехники в Москве.
Мы предлагаем: ремонт студийных вспышек
Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!
Подробнее на сайте сервисного центра remont-vspyshek-realm.ru
https://creative-seal-dc4vll.mystrikingly.com/blog/14454604242
gates of olympus demo Gates of Olympus gates of olympus oyna
https://xn--gb-2e2i723b91ktjas9l307b.mystrikingly.com/blog/3552b7d0af2
https://ameblo.jp/naveridbuy/entry-12867044891.html
https://xn--zb-hd0j5a097plop.mystrikingly.com/blog/c9357ae72f4
https://medium.com/@nsw5288/%EB%B0%9C%EA%B8%B0%EB%B6%80%EC%A0%84%EA%B3%BC-%EC%A1%B0%EB%A3%A8-%EC%9E%90%EA%B0%80-%EC%A7%84%EB%8B%A8%EA%B3%BC-%EC%B9%98%EB%A3%8C%EB%B2%95-557e4352a569
https://xn--hq-hd0j99gyns5zflam0o3rd.mystrikingly.com/blog/8857003bebc
The brand new Quil Ceda Creek Casino celebrates its grand opening on Wednesday, February 3rd 2021. Located across the street from its former residence, the “Q” boasts twice the space with 500 more machines! Read all the details (see below) in our Welcome Magazine Fall Winter Edition 2020 2021 article. According to Quil Ceda Creek Casino, the Tulalip Tribe has invested in street improvements to make it easier to access the new casino that is located on 15 acres of the tribal land just off the I-5 exit 199. The new Quil Ceda Creek Casino will offer guests more to love with 1,500 gaming machines (an increase of 500 machines), 16 table games (with three new tables added), an expanded entertainment lounge, three full-service bars, a full-service restaurant, a food hall with multiple cooked-to-order food venues and a state-of-the-art smoke management system.
https://dreevoo.com/profile_info.php?pid=679555
Most online casinos offer lucrative welcome bonuses to entice new players. Often these come with significant playthrough requirements, so you will need to wager this money several times before you can withdraw. The good news is, slots often contribute highly towards these requirements. © Copyrights 2024 Some strategies are based on superstition or false assumptions, or slot machines. Is that it for the freshly established Neon54, in Adelaide. These are bonuses that are given to players without the need to make a deposit, we also offer helpful guides and articles on topics such as responsible gambling. Bet $5, Get $200 In Bonus Bets + 1 Month Subscription of NFL+ Premium We offer exclusive bonuses for Cash Frenzy platform. Their list is regularly updated, so you should periodically check the current promo offers. Everyone can use them for free.
mexican border pharmacies shipping to usa mexican drugstore online buying prescription drugs in mexico online
indianpharmacy com: reputable indian pharmacies – indianpharmacy com
https://ganghwamarathon.co.kr/bbs/board.php?bo_table=board03_8008&wr_id=261796
https://ask-people.net/user/carlfrancoh38793