|
行為層
先簡(jiǎn)單說一下拖動(dòng)是怎么實(shí)現(xiàn)的
其中，A 是絕對(duì)定位的，并且有一個(gè) left 值 a，當(dāng)鼠標(biāo)在上面按下（onmousedown）時(shí)，記錄下 b 值，相減算出 c 值
var c;
*.onmousedown=function(e){
if(!e){e=e||window.event;}
ex=e.pageX?e.pageX:e.x;
c=ex-*.offsetLeft;
}
鼠標(biāo)按住并且移動(dòng)時(shí)，A 應(yīng)該隨鼠標(biāo)橫向移動(dòng)，不斷產(chǎn)生 d 值，不斷設(shè)定 A 的 left 值為 d-c，就實(shí)現(xiàn)了橫向移動(dòng)，縱向同理。
*.onmousemove=function(e){
if(!e){e=e||window.event;}
ex=e.pageX?e.pageX:e.x;
*.style.left=ex-c;
}
轉(zhuǎn)到 ThrowPage，其實(shí)效果的前半段就是標(biāo)準(zhǔn)的橫向拖動(dòng)
前面為 <div class="page"> 定義了一個(gè) left 值，如果想居中的話，這個(gè)值應(yīng)為
(<div id="menu">寬-<div class="page">寬)/2
沿用上面的例子，用到的幾個(gè)坐標(biāo)如下圖
BD 為 <div class="page"> 的初始位置
AB 為動(dòng)畫中最左狀態(tài)位置，DE 為最右位置
當(dāng)然，OF 可以小于 3 倍 BD，A 將小于 0，E 將大于 F
注：如果你是用
.page{
position:absolute;
width:x px;
left:50%;
margin-left:-(x/2)px;
}
實(shí)現(xiàn)居中的，涉及的 m-l 值請(qǐng)自行計(jì)算
松開鼠標(biāo)后，停止移動(dòng)，開始動(dòng)畫，頁面左邊線（即圖中 B，下簡(jiǎn)稱“左邊”）可能有以下幾種情況：
- 左邊在 A 及 A 的左邊-------頁面跳到 AB 位置
- 左邊在 AB 中間-------頁面移動(dòng)到 AB 位置
- 左邊在 B-------不進(jìn)行動(dòng)畫（變態(tài)，拽了半天又放回去）
- 左邊在 BD 中間-------頁面移動(dòng)到 DE 位置
- 左邊在 D 及 D 的右邊-------頁面跳到 DE 位置
題外話：由此可見，移動(dòng)的距離并不確定，用 JQ 的 animate 的話，時(shí)間一定，速度就不一樣了，很撓墻。所以我的方法是：向目標(biāo)位置移動(dòng) 10 像素（幾像素都可以，自己定，其實(shí)這就是移動(dòng)速度），如果沒有到目標(biāo)位置，再移動(dòng) 10 像素，可以到或者超過的話，直接跳到目標(biāo)位置（很像遞歸，但確切的說不是）
向中間回移也是同樣道理，故略
z-index 層疊順序問題：
當(dāng)最上面的層被拖拽的時(shí)候，他下面的一層會(huì)被顯示，正如上圖所示，被拖拽的層 z-index 值為 2，下面顯示的一層 z-index 值為 1，再下面的被覆蓋的層 z-index 值統(tǒng)統(tǒng)為 0
被拖拽層移動(dòng)到坐標(biāo)中 AB 或 DE 后，降一下 z-index 值，飛回的時(shí)候就跑到后面去了，同理，“左拖前翻，右拖后翻”的實(shí)現(xiàn)關(guān)鍵，是計(jì)算好哪一層的 z-index 值應(yīng)該是 1
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 拖拽翻頁(ThrowPage)詳解 [2] 下一頁 拖拽翻頁(ThrowPage)詳解 [4]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 3 頁 拖拽翻頁(ThrowPage)詳解 [3]
