怎樣用Dreamweaver製作拖拽效果

來源:互聯網
上載者:User

  在網上,我們經常可以看到一些非常實用的拖拽效果,特別是應用於網上購物時,訪問者直接就可以把選中的物品拖拽到購物箱或者購物車裡,非常方便、有趣。不過大多數人不知道,其實用Dreamweaver中的Behaviors也可以做出同樣的效果來。如果你有興趣,就和我一起來製作一個具有拖拽效果的的購物箱吧!

  在做拖拽效果的網頁之前,首先我們要準備一些圖片。比如用作購物箱或購物車的一張大圖片,外加幾張代表物品的小圖片。我在這兒準備了一個購物袋,還有幾樣物品,它們分別是:手機、遊戲手柄和汽車(哇!汽車也可以拖進購物袋中啊!)。

  準備好了圖片,就可以開始我們的工作了。開啟Dreamweaver,建立一個頁面,在對象面板中選擇圖層工具,然後用滑鼠在頁面上拖出一個圖層來(或者選擇“Insert/Layer”,插入一個新層)。然後,把滑鼠放進層中,再選擇“對象/插入映像工具”,在此圖層中插入剛才準備好的一個圖片。

  重複上面的動作,再接著插入3個圖層,然後在此3個圖層中分別插入你準備好的另外幾張圖片。完成後效果如圖1。

  圖1

  好了,重要的一步來了。點擊“視窗/動作”,會彈出“動作(Behaviors)”對話方塊來,如圖2。點擊對話方塊上方的“+”號後,會再彈出一個菜單,選擇此菜單中的“Drag Layer”,接著再彈出的,就是“Drag Layer”對話方塊了,如圖3。

  圖2

  在此對話方塊中可以分別設定幾個圖層的屬性。我們把插入購物袋映像的那個圖層設定為“不可移動層(Unconstrained)”,其餘的幾個圖層設定為“可移動層(Constrained)”。在此對話方塊上還有一個“Advanced”選項,點擊它,在此面板上勾選“When Drag”選項,然後再把“Ring layer to front,then”選項設定為“Restored z-index”就可以了。

  圖3

  重複上述步驟,分別設定好其他幾個圖層的屬性,設定好的“Behaviors”對話方塊的中間文字框中多出了4個“onLoad”標記。

  好了,設定完這些,我們的工作也完成了,別忘了儲存網頁,然後按下“F12”鍵,看看你做的拖動頁面酷不酷?

  

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。