水平滑動切換顯示內容

閱讀時間約 4 分鐘
可應用在 AP 元素(DIV)內的影像水平滑動切換,搭配巢狀 AP 元素(DIV)與內嵌式頁框,媲美 Animate 互動瀏覽影像效果。

A.加入 AP DIV 於頁面上

在 Dreamweaver 中,要加入 AP DIV 除了設定 CSS 外,更簡單的方式是使用繪製 AP DIV 工具, 繪製出 AP DIV 後就可以在 AP DIV 範圍內插入圖片、文字、表格,並且可以針對 AP DIV 進行相關屬性的設定。Dreamweaver CC 版本已經無繪製 AP DIV 工具,為了方便可以將舊版的繪製 AP DIV 工具檔案置入 CC 版本的資料夾之中, 即可繼續使用。切換插入工具列(視窗>插入)的類別為『最愛』,準備開始來繪製 AP DIV 於頁面上。

B. 加入水平滑動切換顯示內容

STEP1.
開啟範例練習檔,內容區左側按鈕來控制右側內容圖片滑動,此二影像儲存格將合併成一個內頁框範圍。
新增空白頁面dw07-iframe.html,設定頁面屬性邊界均為0,插入影像3-2-4_03.jpg、3-2-4_04.jpg,準備好內頁框內容頁。
STEP2.
繪製 AP 元素為 apDiv1,設定寬:2400px(600X4)、高:340px,在 AP 元素上加入要滑動的四張影像dw07-p1.jpg ~ dw07-p4.jpg;
再繪製第二個 AP 元素為 apDiv2,設定座標位置為左:300px、上:0px、寬 600px、高 340px(同單張影像尺寸),覆蓋於 apDiv1 之上,apDiv2 將作為控制 apDiv1 顯示的範圍使用。
STEP3.
組合兩個為巢狀 AP 元素,切換至程式碼選取【<div id=”apDiv1”……</div>】剪下並貼入<div id=”apDiv2”……>之內(</div>之前);
點取 apDiv1,修正 apDiv1 的座標 左 0、上 0,完成apDiv1 於 apDiv2 之內的巢狀 AP 元素安排。
STEP4.
點取 apDiv2 設定「溢位:hidden、裁切:左 0 上 0 右 600 下 340」,藉由巢狀 AP 元 素與溢位設定將包含影像的 apDiv1 顯示 範圍控制於 apDiv2 之內,僅顯示單張影 像內容。
STEP5.
修正 AP 元素 CSS 配合 AP 元素滑動擴充元件使用,請複選上方#apDiv1 的 CSS 內
【position:absolute;……z-index:1;】複製,至下方<div id=”apDiv1”>標籤內加上【style=””】,將複製的 CSS 屬性貼入雙引號之間。
STEP6.
為左側影像按鈕上加上影像地圖一共四個:
由dw07-hScrollDiv.html內複製相關 javaScript,並回到dw07-iframe.html頁面內的</head>之前貼上:
點取影像地圖切換至程式碼編輯,加入【onclick="flevSlideDiv('apDiv1',0,0,10,0,0)"】,繼續貼至下方另外三個影像地圖標籤內,更 改控制座標左 Left 的值各為-600、-1200 與-1800 即可。(每張圖寬 600,依序設定 AP 元素向左移動後的座 標位置)
STEP9.
最後回到「dw07.html」,「dw07-iframe.html」以內嵌式 頁框組合回來。dw07.html頁面上各點取內容區二影像並直接刪除,並將二儲存格合併為一,確定滑鼠游標在要插入內頁框儲存格內,加入<iframe>內容即可。
儲存檔案按下【F12】瀏覽,即可由左方按鈕控制以AP 元素承載之滑動動態移動位置。
相關課程 : 優勢多媒體 - Dreamweaver專業網頁編輯應用
為什麼會看到廣告
29會員
161內容數
藉由Animate CC製作網頁上的動畫,並發佈成HTML5+CANVAS+JAVASCRIPT格式,已是最有效率設計製作專業網頁動畫效果的方式,筆者將藉由此空間分享與介紹Animate CC製作網頁動畫技巧,歡迎一起讓網頁上的內容動起來!
留言0
查看全部
發表第一個留言支持創作者!
哩老師的沙龍 的其他內容
網頁除了自動捲動的文字方式外,還可以製作出更捲動控制的內容,當滑鼠在捲動按鈕上時,內容就會互動捲動,這就是互動局部捲動內容區的製作。互動捲動區內容是固定座標位置,當無法固定位置時(如頁面置中),就需要藉由內嵌式頁框的方式與版面整合。 STEP1. 開啟範例練習檔,已經處理完成版面內容的水平置中,內
影像瀏覽除了播放與控制播放外,最完美的還需要可以點圖直接開啟顯示大圖,接下來要介紹的就是可以直接於同頁面上顯示大圖的圖片瀏覽擴充元件,由小圖切換瀏覽圖片,按下小圖,相對應大圖會在旁顯示。 STEP1. 開啟「dw05.html」檔,由切割存出的HTML 檔,左側空白處為要插入小圖與切 換右側大圖的
影像播放的效果,除了自動播放影像,本擴充元件是一個可以設定停止播放與繼續播放影像的效果,還可以是直接選擇要顯示的圖片,只要設定行為在按鈕上來控制影像播放即可,且每張播放的圖片皆可設定獨立連結位置,唯需要注意正確搭配DIV標籤。 STEP1. 開啟「dw04.html」檔,由切割存出的HTML 檔,影
網頁除了自動捲動的文字方式外,還可以製作出更捲動控制的內容,當滑鼠在捲動按鈕上時,內容就會互動捲動,這就是互動局部捲動內容區的製作。互動捲動區內容是固定座標位置,當無法固定位置時(如頁面置中),就需要藉由內嵌式頁框的方式與版面整合。 STEP1. 開啟範例練習檔,已經處理完成版面內容的水平置中,內
影像瀏覽除了播放與控制播放外,最完美的還需要可以點圖直接開啟顯示大圖,接下來要介紹的就是可以直接於同頁面上顯示大圖的圖片瀏覽擴充元件,由小圖切換瀏覽圖片,按下小圖,相對應大圖會在旁顯示。 STEP1. 開啟「dw05.html」檔,由切割存出的HTML 檔,左側空白處為要插入小圖與切 換右側大圖的
影像播放的效果,除了自動播放影像,本擴充元件是一個可以設定停止播放與繼續播放影像的效果,還可以是直接選擇要顯示的圖片,只要設定行為在按鈕上來控制影像播放即可,且每張播放的圖片皆可設定獨立連結位置,唯需要注意正確搭配DIV標籤。 STEP1. 開啟「dw04.html」檔,由切割存出的HTML 檔,影
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
看到了彩虹 有人說 ~ 今天是幸福的星期五   一幅與平日不同的風景 對這世界來說是不稀奇的事情   我們把自己關在一層層的磚瓦、玻璃、水泥牆內 反而看不到、感受不了真正的季節   今天是第200天 洶湧的淚腺未曾枯竭過 即使在那段台灣開始缺水的日子裡   淚 有他的自由 奔放如宣洩而下的瀑布 止不
Thumbnail
那時候的您 年齡沒有老到很囉唆 而我也還正值青壯   生活裡的不方便 好像也還好 沒有那麼深的不貼心   是從您更加力不從心的時候吧 那時我開始常感身體疲憊不太想動   這時的我 嘴上常掛著 『老爸,您老了,您的女兒,我,也不再年輕了』   可能說的次數多了 您也就慢慢得不再說期望與要求   在需要
Thumbnail
每到夏天我要去海邊~想必不少潛水愛好者因為疫情不能出國而感到可惜吧!別擔心,台灣就有不輸國外的潛水勝地。小琉球不只夏天,連冬天也是潛水天堂,近幾年當地觀光業者更是引進許多低碳水上活動,不但遊客玩得開心,也能降低人類對大自然的汙染,保護生態,今天就來解密小琉球水上玩法!
Thumbnail
今天要來介紹大成  大成主要經營範疇為飼料、肉品、油脂、大宗物資、食品、蛋品等 除了進行垂直整合,還加上水平整合與擴展‵,整個食品版圖越來越大   從基本面來看大成,了解財務資料,並展望未來
Thumbnail
學生寫的原文: 在黑夜中,落在城市的我家外,有那麼朦朧而如夢般的美景。月亮被雲朵輕懸在高空,卻無從前在旁戲耍的星星,究竟他們都去哪兒了?原來現在人不若前人儉樸,三更半夜還奢侈的點燈,不知道大自然的資源可貴,於是就成了不夜城。雖燈光之於人有不可或缺的地位,夜晚的光害卻真真實實的報仇—人們的生理時鐘壞了
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
美國總統大選只剩下三天, 我們觀察一整週民調與金融市場的變化(包含賭局), 到本週五下午3:00前為止, 誰是美國總統幾乎大概可以猜到60-70%的機率, 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Thumbnail
Faker昨天真的太扯了,中國主播王多多點評的話更是精妙,分享給各位 王多多的點評 「Faker是我們的處境,他是LPL永遠繞不開的一個人和話題,所以我們特別渴望在決賽跟他相遇,去直面我們的處境。 我們曾經稱他為最高的山,最長的河,以為山海就是盡頭,可是Faker用他28歲的年齡...
Thumbnail
看到了彩虹 有人說 ~ 今天是幸福的星期五   一幅與平日不同的風景 對這世界來說是不稀奇的事情   我們把自己關在一層層的磚瓦、玻璃、水泥牆內 反而看不到、感受不了真正的季節   今天是第200天 洶湧的淚腺未曾枯竭過 即使在那段台灣開始缺水的日子裡   淚 有他的自由 奔放如宣洩而下的瀑布 止不
Thumbnail
那時候的您 年齡沒有老到很囉唆 而我也還正值青壯   生活裡的不方便 好像也還好 沒有那麼深的不貼心   是從您更加力不從心的時候吧 那時我開始常感身體疲憊不太想動   這時的我 嘴上常掛著 『老爸,您老了,您的女兒,我,也不再年輕了』   可能說的次數多了 您也就慢慢得不再說期望與要求   在需要
Thumbnail
每到夏天我要去海邊~想必不少潛水愛好者因為疫情不能出國而感到可惜吧!別擔心,台灣就有不輸國外的潛水勝地。小琉球不只夏天,連冬天也是潛水天堂,近幾年當地觀光業者更是引進許多低碳水上活動,不但遊客玩得開心,也能降低人類對大自然的汙染,保護生態,今天就來解密小琉球水上玩法!
Thumbnail
今天要來介紹大成  大成主要經營範疇為飼料、肉品、油脂、大宗物資、食品、蛋品等 除了進行垂直整合,還加上水平整合與擴展‵,整個食品版圖越來越大   從基本面來看大成,了解財務資料,並展望未來
Thumbnail
學生寫的原文: 在黑夜中,落在城市的我家外,有那麼朦朧而如夢般的美景。月亮被雲朵輕懸在高空,卻無從前在旁戲耍的星星,究竟他們都去哪兒了?原來現在人不若前人儉樸,三更半夜還奢侈的點燈,不知道大自然的資源可貴,於是就成了不夜城。雖燈光之於人有不可或缺的地位,夜晚的光害卻真真實實的報仇—人們的生理時鐘壞了