jqzoom 局部放大檢視影像

閱讀時間約 1 分鐘
此擴充元件提供圖片另外一種瀏覽的方式,即是以滑鼠移動檢視局部放大的瀏覽效果,只要準備小圖與放大圖,即可快速加入此效果於頁面上。
STEP1.
開啟範例練習檔dw08.html,再新增一空白檔案為 dw08-iframe.html,為要插入『jqzoom』元件。直接由dw08-jqzoom.html程式碼內,複選並貼入所需 CSS 與 Javasccript 檔連接於</head>之前:
以及複選並貼入dw08-iframe.html於<body>內加入所需內容:
STEP2.
點取加入的內容,切換至程式碼並修正影像為預先準備小圖(white-car-image-s.jpg)與大圖(white-car-image.jpg),原圖為小圖、連結為大圖。
STEP3.
可以切換至程式碼,更改放大檢視的視窗大小,更改【zoomWidth】與【zoomHeight】即可;檢視視窗上方的標題,只要更改【title】。
STEP4.
對於顯示視窗的屬性,可以至 CSS 樣式控制板上更改控制標題的【div.jqZoomTitle】,更改 font-size、height、color、background-color;更改控制顯示視窗的【.jqZoomWindow】按下編輯更改邊框屬性即可。
STEP5.
回到原頁面dw08.html,確定滑鼠游標在要插入內頁框儲存格內,加入<iframe>內容即可。
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用
為什麼會看到廣告
avatar-img
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
可應用在 AP 元素(DIV)內的影像水平滑動切換,搭配巢狀 AP 元素(DIV)與內嵌式頁框,媲美 Animate 互動瀏覽影像效果。 A.加入 AP DIV 於頁面上 在 Dreamweaver 中,要加入 AP  DIV 除了設定 CSS 外,更簡單的方式是使用繪製 AP  DIV 工具,
網頁除了自動捲動的文字方式外,還可以製作出更捲動控制的內容,當滑鼠在捲動按鈕上時,內容就會互動捲動,這就是互動局部捲動內容區的製作。互動捲動區內容是固定座標位置,當無法固定位置時(如頁面置中),就需要藉由內嵌式頁框的方式與版面整合。 STEP1. 開啟範例練習檔,已經處理完成版面內容的水平置中,內
影像瀏覽除了播放與控制播放外,最完美的還需要可以點圖直接開啟顯示大圖,接下來要介紹的就是可以直接於同頁面上顯示大圖的圖片瀏覽擴充元件,由小圖切換瀏覽圖片,按下小圖,相對應大圖會在旁顯示。 STEP1. 開啟「dw05.html」檔,由切割存出的HTML 檔,左側空白處為要插入小圖與切 換右側大圖的
影像播放的效果,除了自動播放影像,本擴充元件是一個可以設定停止播放與繼續播放影像的效果,還可以是直接選擇要顯示的圖片,只要設定行為在按鈕上來控制影像播放即可,且每張播放的圖片皆可設定獨立連結位置,唯需要注意正確搭配DIV標籤。 STEP1. 開啟「dw04.html」檔,由切割存出的HTML 檔,影
可應用在 AP 元素(DIV)內的影像水平滑動切換,搭配巢狀 AP 元素(DIV)與內嵌式頁框,媲美 Animate 互動瀏覽影像效果。 A.加入 AP DIV 於頁面上 在 Dreamweaver 中,要加入 AP  DIV 除了設定 CSS 外,更簡單的方式是使用繪製 AP  DIV 工具,
網頁除了自動捲動的文字方式外,還可以製作出更捲動控制的內容,當滑鼠在捲動按鈕上時,內容就會互動捲動,這就是互動局部捲動內容區的製作。互動捲動區內容是固定座標位置,當無法固定位置時(如頁面置中),就需要藉由內嵌式頁框的方式與版面整合。 STEP1. 開啟範例練習檔,已經處理完成版面內容的水平置中,內
影像瀏覽除了播放與控制播放外,最完美的還需要可以點圖直接開啟顯示大圖,接下來要介紹的就是可以直接於同頁面上顯示大圖的圖片瀏覽擴充元件,由小圖切換瀏覽圖片,按下小圖,相對應大圖會在旁顯示。 STEP1. 開啟「dw05.html」檔,由切割存出的HTML 檔,左側空白處為要插入小圖與切 換右側大圖的
影像播放的效果,除了自動播放影像,本擴充元件是一個可以設定停止播放與繼續播放影像的效果,還可以是直接選擇要顯示的圖片,只要設定行為在按鈕上來控制影像播放即可,且每張播放的圖片皆可設定獨立連結位置,唯需要注意正確搭配DIV標籤。 STEP1. 開啟「dw04.html」檔,由切割存出的HTML 檔,影
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
在做任何的治療前,務必有相對應的檢查與適切的診斷或區別診斷,同時理解藥物可能產生的副作用。First, do no harm.
之前有提到有時我們在微分之後會得到gradient = 0的值,就以為我們已經找到最小值,但其實它只是local minima。 那這一節主要想跟大家分享我們要怎麼區分是不是Local Minima。
肩頸部位是人體常見的疲勞集中區域,而推拿按摩被廣泛認為是緩解這一問題的有效手段之一。本文將評估推拿按摩對於肩頸局部血流量的影響,並探討其在新竹、台中、台北、竹北等地區的應用情況。 首先,推拿按摩可以促進肩頸部位的血液循環,增加局部血流量。通過適當的按摩手法和力度,推拿按摩可以刺激肌肉和血管,促進血
Thumbnail
跟大家分享這個我覺得很強大,實用又簡單的功能,過去會有喜歡某張圖,但手部細節不自然或只有四支手指,導致得放棄圖的情況,都可被改善。 我們以這張圖做例子,幫它做細部調整。 短片版點擊我YT 我們可以找到 vary (region) 點下去, 之後它會到這個頁面,我們可以按左下的方格去做圈選,按
Thumbnail
改變局部特性是第三個被發現的發明原理,也在很多專利中反覆出現。一個事物若對周遭環境而言,整體特性都一樣並不會得到最好的運作效果時,非均質的系統結構和環境往往是最能適應環境中不同位置與對象的需求。使得能實現系統中資源的最好的配置,達到最好的利用。這是很好用的發明原理。你覺得工作上、生活中可怎麼運用?
Thumbnail
251年群雄集結劇本的孔伷,一向被認為是難度最高的勢力之一,尤其緊鄰強勢的曹操,一些挑戰孔伷的玩家選擇的生存之道就是和曹操同盟了。但是,若能將許昌變為一座廢城,整個曹軍也只是等待玩家接收的人才寶庫而已。
Thumbnail
希臘知名的世界文化遺產「雅典衛城」,是希臘一千多年璀璨文明的代表。不過,最近決定進行西側入口的大型改善工程,再度引發世界各地建築師、歷史學家、考古學家和博物館代表等的嚴厲譴責,要求當局政府停止這項「使希臘最大考古及藝術寶藏貶值」的工程...
Thumbnail
-捷運龍山寺站出口 增加了兩個一樣的筆刷 刷亮兩部分 色溫: +25 色調: -14 曝光度: +3.52 對比: -15 亮部: +28 陰影: +17 白色: +13 黑色: +11 紋理: +25 清晰度:+91 去朦朧:+32 飽和度:-1
lpg原理是什麼? 肥胖已經是現代人的文明病之一,由於有愈來愈多美食的誘惑,科技進步也幫助了更多人不需要移動身軀就能達到想完成的事情,像是外送就是很好的範例之一,這時候一定很多人希望有個發明,是可以不用運動不用節食,又能快速消除身上頑固肥肉!這時候就出現了體雕,LPG專利動力輪軸的物理性按摩,促進脂
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
在做任何的治療前,務必有相對應的檢查與適切的診斷或區別診斷,同時理解藥物可能產生的副作用。First, do no harm.
之前有提到有時我們在微分之後會得到gradient = 0的值,就以為我們已經找到最小值,但其實它只是local minima。 那這一節主要想跟大家分享我們要怎麼區分是不是Local Minima。
肩頸部位是人體常見的疲勞集中區域,而推拿按摩被廣泛認為是緩解這一問題的有效手段之一。本文將評估推拿按摩對於肩頸局部血流量的影響,並探討其在新竹、台中、台北、竹北等地區的應用情況。 首先,推拿按摩可以促進肩頸部位的血液循環,增加局部血流量。通過適當的按摩手法和力度,推拿按摩可以刺激肌肉和血管,促進血
Thumbnail
跟大家分享這個我覺得很強大,實用又簡單的功能,過去會有喜歡某張圖,但手部細節不自然或只有四支手指,導致得放棄圖的情況,都可被改善。 我們以這張圖做例子,幫它做細部調整。 短片版點擊我YT 我們可以找到 vary (region) 點下去, 之後它會到這個頁面,我們可以按左下的方格去做圈選,按
Thumbnail
改變局部特性是第三個被發現的發明原理,也在很多專利中反覆出現。一個事物若對周遭環境而言,整體特性都一樣並不會得到最好的運作效果時,非均質的系統結構和環境往往是最能適應環境中不同位置與對象的需求。使得能實現系統中資源的最好的配置,達到最好的利用。這是很好用的發明原理。你覺得工作上、生活中可怎麼運用?
Thumbnail
251年群雄集結劇本的孔伷,一向被認為是難度最高的勢力之一,尤其緊鄰強勢的曹操,一些挑戰孔伷的玩家選擇的生存之道就是和曹操同盟了。但是,若能將許昌變為一座廢城,整個曹軍也只是等待玩家接收的人才寶庫而已。
Thumbnail
希臘知名的世界文化遺產「雅典衛城」,是希臘一千多年璀璨文明的代表。不過,最近決定進行西側入口的大型改善工程,再度引發世界各地建築師、歷史學家、考古學家和博物館代表等的嚴厲譴責,要求當局政府停止這項「使希臘最大考古及藝術寶藏貶值」的工程...
Thumbnail
-捷運龍山寺站出口 增加了兩個一樣的筆刷 刷亮兩部分 色溫: +25 色調: -14 曝光度: +3.52 對比: -15 亮部: +28 陰影: +17 白色: +13 黑色: +11 紋理: +25 清晰度:+91 去朦朧:+32 飽和度:-1
lpg原理是什麼? 肥胖已經是現代人的文明病之一,由於有愈來愈多美食的誘惑,科技進步也幫助了更多人不需要移動身軀就能達到想完成的事情,像是外送就是很好的範例之一,這時候一定很多人希望有個發明,是可以不用運動不用節食,又能快速消除身上頑固肥肉!這時候就出現了體雕,LPG專利動力輪軸的物理性按摩,促進脂