jqzoom 局部放大檢視影像
2020/05/12閱讀時間約 1 分鐘
此擴充元件提供圖片另外一種瀏覽的方式，即是以滑鼠移動檢視局部放大的瀏覽效果，只要準備小圖與放大圖，即可快速加入此效果於頁面上。
STEP1.
開啟範例練習檔dw08.html，再新增一空白檔案為 dw08-iframe.html，為要插入『jqzoom』元件。直接由dw08-jqzoom.html程式碼內，複選並貼入所需 CSS 與 Javasccript 檔連接於</head>之前:
開啟範例練習檔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)，原圖為小圖、連結為大圖。
點取加入的內容，切換至程式碼並修正影像為預先準備小圖(white-car-image-s.jpg)與大圖(white-car-image.jpg)，原圖為小圖、連結為大圖。
STEP3.
可以切換至程式碼，更改放大檢視的視窗大小，更改【zoomWidth】與【zoomHeight】即可；檢視視窗上方的標題，只要更改【title】。
可以切換至程式碼，更改放大檢視的視窗大小，更改【zoomWidth】與【zoomHeight】即可；檢視視窗上方的標題，只要更改【title】。
STEP4.
對於顯示視窗的屬性，可以至 CSS 樣式控制板上更改控制標題的【div.jqZoomTitle】，更改 font-size、height、color、background-color；更改控制顯示視窗的【.jqZoomWindow】按下編輯更改邊框屬性即可。
對於顯示視窗的屬性，可以至 CSS 樣式控制板上更改控制標題的【div.jqZoomTitle】，更改 font-size、height、color、background-color；更改控制顯示視窗的【.jqZoomWindow】按下編輯更改邊框屬性即可。
STEP5.
回到原頁面dw08.html，確定滑鼠游標在要插入內頁框儲存格內，加入<iframe>內容即可。
回到原頁面dw08.html，確定滑鼠游標在要插入內頁框儲存格內，加入<iframe>內容即可。
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用
為什麼會看到廣告
留言0
查看全部