DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 菜鳥學用Dreamweaver MX 2004行為(13)拖動層
菜鳥學用Dreamweaver MX 2004行為(13)拖動層
編輯:Dreamweaver相關     

  本站原創內容,轉載請注明出處網頁教學網

  拖動層

  拖動層動作允許訪問者拖動層。使用此動作創建拼板游戲、滑塊控件和其它可移動的界面元素。

  您可以指定訪問者可以向哪個方向拖動層(水平、垂直或任意方向),訪問者應該將層拖動到的目標、如果層在目標一定數目的像素范圍內是否將層靠齊到目標,當層接觸到目標時應該執行的操作和其它更多的選項。

  因為在訪問者可以拖動層之前必須先調用“拖動層”動作,所以請確保觸發該動作的事件發生在訪問者試圖拖動層之前。最佳的方法是(使用 onLoad 事件)將“拖動層”附加到 body 對象上,不過您也可以使用 onMouseOver 事件將它附加到填滿整個層的鏈接上。

  具體制作的過程如下:

  選擇“插入”-->>“布局對象”-->>“層”,在文檔窗口中插入了一個層。該層為:Layer1。我們可以在層中插入一個圖片。

  通過單擊“文檔”窗口底部標簽選擇器中的 <body> 選擇 body 標簽。

  打開“行為”面板,從“動作”中選擇“拖動層”。如下圖:


(圖片較大,請拉動滾動條觀看)

  在“層”彈出菜單中,選擇要使其可拖動的層,如圖:選“層Layer1”。

  從“移動”彈出菜單中選擇“限制”或“不限制”。如圖:選“不限制”。

  在“左”和“上”文本框中為拖放目標輸入值(以像素為單位)。

  拖放目標是一個點,您想要訪問者將層拖動到該點上。當層的左坐標和上坐標與在“左”和“上”文本框中輸入的值匹配時便認為層已經到達拖放目標。這些值是與浏覽器窗口的左上角相對的。

  在“靠齊距離”文本框中輸入一個值(像素)確定訪問者必須放目標多近,才能將層靠齊到目標。較大的值可以使訪問者較容易找到拖放目標。

  注意行為面板中的動作為onload。保存頁面,F12預覽。

  別忘了我們是在學習啊!打開相應的在代碼視圖看看文件中新增加的代碼,這樣我們可以熟悉代碼了啊!

注:本例只是一個簡單的拖動層的實例,你可以充分發揮你的想象,做出更復雜的拖動層的效果,例如“拼圖游戲”是拖動層的典型應用,用途十分廣泛,大家可以自己試著做做。把你的制作步驟可以給我說說!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved