网页制作教程:制作拖拽翻页

简介：拖拽翻页(ThrowPage)详解.

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

在此正式将此效果命名为 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.webjx.com" target="_blank">伴侣</a></li> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">美丽岛</a></li> <li style="background:coral;"><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">舞女</a></li> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">手牵手</a></li> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">初恋的少年家</a></li> </ul> </div> <div class="page"> <ul> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">啊！停不住的爱人</a></li> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">网路</a></li> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">倾城之雨</a></li> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">往事2000</a></li> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">绿色恐怖分子</a></li> </ul> </div> <div class="page"> <ul> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">时光在慢慢消失</a></li> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">宁静温泉</a></li> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">变天着花</a></li> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">阿辉饲了一只狗</a></li> <li><span>09-11-25</span><a href="http://www.webjx.com" target="_blank">真的假的</a></li> <li><span>09-11-25</span><a href="http://www.webjx.com" 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>

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

文章共4页: [1] [2] [3] [4]

更多的网页制作教程:制作拖拽翻页请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：互联网日期：2009-12-1