位置：首页>> 网络编程>> 网页设计>> 拖拽翻页(ThrowPage)详解 cool（3）

拖拽翻页(ThrowPage)详解 cool（3）

作者：蓝色理想　来源：蓝色理想　发布时间：2009-12-02 09:54:00　

标签：翻页,拖拽,css

行为层

先简单说一下拖动是怎么实现的

其中，A 是绝对定位的，并且有一个 left 值 a，当鼠标在上面按下（onmousedown）时，记录下 b 值，相减算出 c 值

var c;
*.onmousedown=function(e){
    if(!e){e=e||window.event;}
    ex=e.pageX?e.pageX:e.x;
    c=ex-*.offsetLeft;
}

鼠标按住并且移动时，A 应该随鼠标横向移动，不断产生 d 值，不断设定 A 的 left 值为 d-c，就实现了横向移动，纵向同理。

*.onmousemove=function(e){
    if(!e){e=e||window.event;}
    ex=e.pageX?e.pageX:e.x;
    *.style.left=ex-c;
}

转到 ThrowPage，其实效果的前半段就是标准的横向拖动
前面为 <div class="page"> 定义了一个 left 值，如果想居中的话，这个值应为

(<div id="menu">宽-<div class="page">宽)/2

沿用上面的例子，用到的几个坐标如下图

BD 为 <div class="page"> 的初始位置
AB 为动画中最左状态位置，DE 为最右位置
当然，OF 可以小于 3 倍 BD，A 将小于 0，E 将大于 F
注：如果你是用

.page{
    position:absolute;
    width:x px;
    left:50％;
    margin-left:-(x/2)px;
}

实现居中的，涉及的 m-l 值请自行计算
松开鼠标后，停止移动，开始动画，页面左边线（即图中 B，下简称“左边”）可能有以下几种情况：

左边在 A 及 A 的左边-------页面跳到 AB 位置
左边在 AB 中间-------页面移动到 AB 位置
左边在 B-------不进行动画（变态，拽了半天又放回去）
左边在 BD 中间-------页面移动到 DE 位置
左边在 D 及 D 的右边-------页面跳到 DE 位置

题外话：由此可见，移动的距离并不确定，用 JQ 的 animate 的话，时间一定，速度就不一样了，很挠墙。所以我的方法是：向目标位置移动 10 像素（几像素都可以，自己定，其实这就是移动速度），如果没有到目标位置，再移动 10 像素，可以到或者超过的话，直接跳到目标位置（很像递归，但确切的说不是）
向中间回移也是同样道理，故略

z-index 层叠顺序问题：

当最上面的层被拖拽的时候，他下面的一层会被显示，正如上图所示，被拖拽的层 z-index 值为 2，下面显示的一层 z-index 值为 1，再下面的被覆盖的层 z-index 值统统为 0
被拖拽层移动到坐标中 AB 或 DE 后，降一下 z-index 值，飞回的时候就跑到后面去了，同理，“左拖前翻，右拖后翻”的实现关键，是计算好哪一层的 z-index 值应该是 1

第一页上一页 1 2

4 下一页

投稿

拖拽翻页(ThrowPage)详解 cool（3）

猜你喜欢