Dreamweaver CC網頁設計應用 - 基礎javaScript應用｜方格子 vocus

基礎javaScript應用

jQuery Prettyphoto 影像互動瀏覽

提供快速建立可自動撥放與前後切換顯示大圖的瀏覽方式，且大圖周圍將以半透明圓角矩形的效果呈現。 STEP1. 開啟範例練習檔dw12.html與dw12-prettyphoto.html，在dw12.html點取原內容區影像（尺寸為600x410）並直接刪除。至dw12-prettyphot

哩老師

2020-05-13

0

Slideshow互動式影像切換播放

提供快速建立可自動撥放與互動控制的大圖瀏覽方式，除了播放控制外，下方將包含小圖的快速瀏覽切換。 STEP1. 開啟範例練習檔dw11.html與dw11-imageslideshow.html，點取dw11.html原內容區影像（尺寸為690x500）並直接刪除。至dw11-images

哩老師

2020-05-13

1

Spry Image Slideshow影像投影片播放

提供快速建立可自動撥放控制的大圖瀏覽方式，像投影片撥放的方式可以暫停與前後往返播放控制。 STEP1. 開啟範例練習檔dw10.html與dw10-imageSlideShow.html。在dw10.html點取原內容區影像(尺寸為 635x410)並直接刪除。至dw10-imageSlide

哩老師

2020-05-13

0

jQuery cycle 影像自動播放效果

可快速加入包含多樣自動影像播放效果，準備好與要加入內容區相同尺寸的多張影像即可。 STEP1. 開啟範例練習檔dw09.html與dw09-jQueryCycle.html，在dw09.html內刪除原內容區影像。再至dw09-jQueryCycle.html內直接複選並貼入所需 CSS 與

哩老師

2020-05-13

0

jqzoom 局部放大檢視影像

此擴充元件提供圖片另外一種瀏覽的方式，即是以滑鼠移動檢視局部放大的瀏覽效果，只要準備小圖與放大圖，即可快速加入此效果於頁面上。 STEP1. 開啟範例練習檔dw08.html，再新增一空白檔案為 dw08-iframe.html，為要插入『jqzoom』元件。直接由dw08-jqzoom.html

哩老師

2020-05-12

0

水平滑動切換顯示內容

可應用在 AP 元素(DIV)內的影像水平滑動切換，搭配巢狀 AP 元素(DIV)與內嵌式頁框，媲美 Animate 互動瀏覽影像效果。 A.加入 AP DIV 於頁面上在 Dreamweaver 中，要加入 AP DIV 除了設定 CSS 外，更簡單的方式是使用繪製 AP DIV 工具，

哩老師

2020-05-12

0

互動局部捲動內容區

網頁除了自動捲動的文字方式外，還可以製作出更捲動控制的內容，當滑鼠在捲動按鈕上時，內容就會互動捲動，這就是互動局部捲動內容區的製作。互動捲動區內容是固定座標位置，當無法固定位置時（如頁面置中），就需要藉由內嵌式頁框的方式與版面整合。 STEP1. 開啟範例練習檔，已經處理完成版面內容的水平置中，內

哩老師

2020-05-12

1

影像瀏覽切換顯示

影像瀏覽除了播放與控制播放外，最完美的還需要可以點圖直接開啟顯示大圖，接下來要介紹的就是可以直接於同頁面上顯示大圖的圖片瀏覽擴充元件，由小圖切換瀏覽圖片，按下小圖，相對應大圖會在旁顯示。 STEP1. 開啟「dw05.html」檔，由切割存出的HTML 檔，左側空白處為要插入小圖與切換右側大圖的

哩老師

2020-05-12

0

影像播放控制

影像播放的效果，除了自動播放影像，本擴充元件是一個可以設定停止播放與繼續播放影像的效果，還可以是直接選擇要顯示的圖片，只要設定行為在按鈕上來控制影像播放即可，且每張播放的圖片皆可設定獨立連結位置，唯需要注意正確搭配DIV標籤。 STEP1. 開啟「dw04.html」檔，由切割存出的HTML 檔，影

哩老師

2020-05-12

1