|
2、然后呢，在這個topDiv層中插入一個新層navDiv，放到左邊； 再插入一個新層moveDiv用來做移動層（我在層中插入一個2行1列的表格，并設(shè)置其背景色）。 參數(shù)設(shè)置與效果如上圖。
3、為navDiv以及moveDiv添加透明效果，使用CSS的ALPHA定義：
其參數(shù)為：
<STYLE type="text/css">
<!--
.divalpha {
filter: Alpha(Opacity=60, FinishOpacity=60, Style=0, StartX=1, StartY=1, FinishX=100, FinishY=100);
}
-->
</STYLE>
得到上圖效果
4、現(xiàn)在我們開始進(jìn)入正題了吧。首先給navDiv層和moveDiv層上的小圖片加上事件。
首先給navDiv層的open.gif小圖片加上：
<IMG src="open.gif" width="13" height="13" style="cursor:hand" onclick="jscript:moveDiv.style.display='';" alt="點擊打開層">
給moveDiv層的close.gif小圖片加上：
<IMG src="close.gif" alt="點擊關(guān)閉層" width="13" height="13" onclick="jscript:moveDiv.style.display='none';" style="cursor:hand">
到現(xiàn)在為此，我們的moveDiv層已經(jīng)有了隱藏和顯示的效果了。現(xiàn)在我們需要使用DW中的拖動層行為，先通過編輯窗口下面的快捷選定<BODY>標(biāo)記，然后為BODY的ONLOAD事件添加拖動層行為：具體參數(shù)如左圖：
注：高級參數(shù)設(shè)置中的左，上，寬，高為moveDiv層的區(qū)域，通過設(shè)置這部分，我們可限制允許拖動層的范圍基本參數(shù)設(shè)置中的上、下、左、右，為moveDiv層可移動的范圍。
5、到目前為止，拖動層的效果已經(jīng)出來了。為了加強(qiáng)效果，我們繼續(xù)： 前面我提到過在moveDiv層中插入了一個2行1列的表格，現(xiàn)在我們在用到它了。 給上面的單元格修改成加上以下代碼：
<TD height="30" bgcolor="#0099FF" onMouseDown="this.style.cursor='move';this.style.backgroundColor='#0066cc'" onMouseUp="this.style.cursor='';this.style.backgroundColor='#0099ff';" id="moveTd" onMouseOut="this.style.cursor='';this.style.backgroundColor='#0099ff';">
到目前為止，整個效果就出來了�。海� 效果如上圖.
出處：六月海設(shè)計
責(zé)任編輯：冰點的冰藍(lán)色
上一頁 Dreamweaver MX中移動層的使用 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 
第 2 頁 Dreamweaver MX中移動層的使用 [2]
