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

【 tulaoshi.com - Web开发 】

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

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

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

运行代码框
htmlheadtitleThrowPage/titlestyle 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/headbodyscript 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.length0){page[0].style.zIndex=2;}for(i=0;ipage.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.offsetLeft350){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.offsetLeft350){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.offsetLeft350){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.offsetLeft350){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;}}}/scriptdiv id="menu"div class="page"ullispan09-11-25/spana href="http://www.webjx.com" target="_blank"伴侣/a/lilispan09-11-25/spana href="http://www.webjx.com" target="_blank"美丽岛/a/lili style="background:coral;"span09-11-25/spana href="http://www.webjx.com" target="_blank"舞女/a/lilispan09-11-25/spana href="http://www.webjx.com" target="_blank"手牵手/a/lilispan09-11-25/spana href="http://www.webjx.com" target="_blank"初恋的少年家/a/li/ul/divdiv class="page"ullispan09-11-25/spana href="http://www.webjx.com" target="_blank"啊！停不住的爱人/a/lilispan09-11-25/spana href="http://www.webjx.com" target="_blank"网路/a/lilispan09-11-25/spana href="http://www.webjx.com" target="_blank"倾城之雨/a/lilispan09-11-25/spana href="http://www.webjx.com" target="_blank"往事2000/a/lilispan09-11-25/spana href="http://www.webjx.com" target="_blank"绿色恐怖分子/a/li/ul/divdiv class="page"ullispan09-11-25/spana href="http://www.webjx.com" target="_blank"时光在慢慢消失/a/lilispan09-11-25/spana href="http://www.webjx.com" target="_blank"宁静温泉/a/lilispan09-11-25/spana href="http://www.webjx.com" target="_blank"变天着花/a/lilispan09-11-25/spana href="http://www.webjx.com" target="_blank"阿辉饲了一只狗/a/lilispan09-11-25/spana href="http://www.webjx.com" target="_blank"真的假的/a/lilispan09-11-25/spana href="http://www.webjx.com" target="_blank"南台湾仔共/a/li/ul/div/div/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

结构层

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

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

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