拖拽翻页(ThrowPage)详解 - 网页制作

　拖拽翻页(ThrowPage)详解

作者：kubau0　时间： 2009-11-30　文档类型：原创　来自：蓝色理想

第 1 页拖拽翻页(ThrowPage)详解 [1]
第 2 页拖拽翻页(ThrowPage)详解 [2]
第 3 页拖拽翻页(ThrowPage)详解 [3]
第 4 页拖拽翻页(ThrowPage)详解 [4]

今年4月，我在宿舍憋出一个拖拽翻页效果

原帖传送：http://bbs.blueidea.com/thread-2921611-1-1.html
修改版传送：http://bbs.blueidea.com/thread-2924151-1-1.html

原本是为自己的博客网站设计的，周二产生的灵感，周三周四逃课两天算坐标，周五回家，到傍晚才算写出了第一版，发布之后没想到评价还不错，此后太多人问我这个效果应该怎么修改，才能用到自己的网站上，所以现在发这个帖子详细解释一下这个效果的原理

在此正式将此效果命名为 ThrowPage ，而且我肯定会继续完善这个效果，并发布封装好的代码，方便大家调用，可能一个月后，也可能一年后，In Me God Trust

本文将按结构层、表现层、行为层三层分开的顺序来写：

运行代码框
<html> <head> <title>ThrowPage</title> <style type="text/css"> html,body{ width:100%; height:100%; border:0px; margin:0px; overflow:hidden; } #menu{ width:1000px; height:500px; overflow:hidden; background:lightblue; } .page{ position:absolute; width:300px; height:400px; left:350px; top:50px; background:#FFF; border:1px solid #999; } ul{ list-style:none; height:320px; margin:20px; padding:0px; background:#EEE; } li{ font-size:12px; height:20px; line-height:20px; border-bottom:1px dashed #999; } li span{ float:right; } li a{ color:#000; text-decoration:none; } li a:hover{ text-decoration:underline; } .tip{ display:block; height:20px; margin:0px 20px; line-height:20px; text-align:center; font-size:12px; background:#999; } </style> </head> <body> <script type="text/javascript"> function id(obj){ return document.getElementById(obj); } var page; var mx; var md=false; var sh=0; var en=false; window.onload=function(){ page=id("menu").getElementsByTagName("div"); if(page.length>0){ page[0].style.zIndex=2; } for(i=0;i<page.length;i++){ page[i].innerHTML+="<span class=\"tip\">"+(i+1)+"/"+page.length+"页拖拽翻页</span>"; page[i].id="page"+i; page[i].i=i; page[i].onmousedown=function(e){ if(!en){ if(!e){e=e||window.event;} ex=e.pageX?e.pageX:e.x; mx=350-ex; this.style.cursor="move"; md=true; if(document.all){ this.setCapture(); }else{ window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); } } } page[i].onmousemove=function(e){ if(md){ en=true; if(!e){e=e||window.event;} ex=e.pageX?e.pageX:e.x; this.style.left=ex+mx+"px"; if(this.offsetLeft<350){ var cu=(this.i==0)?page.length-1:this.i-1; page[sh].style.zIndex=0; page[cu].style.zIndex=1; this.style.zIndex=2; sh=cu; } if(this.offsetLeft>350){ var cu=(this.i==page.length-1)?0:this.i+1; page[sh].style.zIndex=0; page[cu].style.zIndex=1; this.style.zIndex=2; sh=cu; } } } page[i].onmouseup=function(){ this.style.cursor="default"; md=false; if(this.offsetLeft==350){ en=false; } if(document.all){ this.releaseCapture(); }else{ window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP); } flyout(this); } } } function flyout(obj){ if(obj.offsetLeft < 350){ if( (obj.offsetLeft - 10) > 50 ){ obj.style.left=obj.offsetLeft - 10 + "px"; window.setTimeout("flyout(id('"+obj.id+"'));",0); }else{ obj.style.left= 50 +"px"; obj.style.zIndex=0; flyin(id(obj.id)); } } if(obj.offsetLeft > 350){ if((obj.offsetLeft + 10) < 650){ obj.style.left=obj.offsetLeft + 10 + "px"; window.setTimeout("flyout(id('"+obj.id+"'));",0); }else{ obj.style.left= 650 + "px"; obj.style.zIndex=0; flyin(id(obj.id)); } } } function flyin(obj){ if(obj.offsetLeft<350){ if((obj.offsetLeft + 10) < 350){ obj.style.left=obj.offsetLeft + 10+"px"; window.setTimeout("flyin(id('"+obj.id+"'));",0); }else{ obj.style.left= 350 +"px"; en=false; } } if(obj.offsetLeft>350){ if((obj.offsetLeft - 10) > 350){ obj.style.left=obj.offsetLeft - 10 +"px"; window.setTimeout("flyin(id('"+obj.id+"'));",0); }else{ obj.style.left=350+"px"; en=false; } } } </script> <div id="menu"> <div class="page"> <ul> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">伴侣</a></li> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">美丽岛</a></li> <li style="background:coral;"><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">舞女</a></li> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">手牵手</a></li> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">初恋的少年家</a></li> </ul> </div> <div class="page"> <ul> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">啊！停不住的爱人</a></li> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">网路</a></li> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">倾城之雨</a></li> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">往事2000</a></li> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">绿色恐怖分子</a></li> </ul> </div> <div class="page"> <ul> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">时光在慢慢消失</a></li> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">宁静温泉</a></li> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">变天着花</a></li> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">阿辉饲了一只狗</a></li> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">真的假的</a></li> <li><span>09-11-25</span><a href="http://www.oern.cn" target="_blank">南台湾仔共</a></li> </ul> </div> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

结构层

要把一个目录的内容按页展开，该怎么写呢？也许是这样，至少我就是这么写的

<div id="menu">
    <div class="page">
        <ul>
            <li><span>09-11-25</span><a>恋曲1980</a></li>
            <li><span>09-11-25</span><a>恋曲1990</a></li>
            <li><span>09-11-25</span><a>恋曲2000</a></li>
            <li><span>09-11-25</span><a>母亲</a></li>
        </ul>
        <span class="tip">1/2页拖拽翻页</span>
    </div>
    <div class="page">
        <ul>
            <li><span>09-11-25</span><a>伴侣</a></li>
            <li><span>09-11-25</span><a>思念</a></li>
            <li><span>09-11-25</span><a>童年</a></li>
            <li><span>09-11-25</span><a>牧童</a></li>
        </ul>
        <span class="tip">2/2页拖拽翻页</span>
    </div>
</div>

<ul> 是每一页的列表，图中的浅灰色色部分
<li> 是列表中的一条，图中的珊瑚色部分
<span class="tip"> 是不应该出现在xhtml 中的，应该由 js 添加，它是每一页下面的索引标识，图中的深灰色部分
<div class="page"> 是目录中的页，图中的白色部分
<div id="menu"> 是包含了所有页的目录，图中的亮蓝色部分。当然，如果页面中除了这个效果外没有其他东西的话，这个标签也可以不写，那么所有 <div class="page"> 的父标签就是 <body>
或许你会说，目录也应该是 <ul>，所以应该这么写

<ul id="menu">
    <li class="page">
        <ul>
            <li><span>09-11-25</span><a>恋曲1980</a></li>
            <li><span>09-11-25</span><a>恋曲1990</a></li>
            <li><span>09-11-25</span><a>恋曲2000</a></li>
            <li><span>09-11-25</span><a>母亲</a></li>
        </ul>
        <span class="tip">1/2页拖拽翻页</span>
    </li>
    <ul class="page">
        <ul>
            <li><span>09-11-25</span><a>伴侣</a></li>
            <li><span>09-11-25</span><a>思念</a></li>
            <li><span>09-11-25</span><a>童年</a></li>
            <li><span>09-11-25</span><a>牧童</a></li>
        </ul>
        <span class="tip">2/2页拖拽翻页</span>
    </li>
</li>

这样确实更符合语意，不过问题马上就来了

出处：蓝色理想
责任编辑：bluehearts

上一页下一页拖拽翻页(ThrowPage)详解 [2]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。


关键字搜索	常规搜索	推荐文档
热门搜索：CSS Fireworks 设计比赛网页制作 web标准用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG

站点最新

站点最新列表

周大福“敬•自然”设计大赛开启

国际体验设计大会7月将在京举行

中国国防科技信息中心标志征集

云计算如何让安全问题可控

云计算是多数企业唯一拥抱互联网的机会

阿里行云

云手机年终巨献，送礼标配299起

阿里巴巴CTO王坚的"云和互联网观"

1499元买真八核云OS双蛋大促

首届COCO桌面手机主题设计大赛

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule