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

拖拽翻页(ThrowPage)详解 cool

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

标签：翻页,拖拽,css

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

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

在此正式将此效果命名为 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>

结构层

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

<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>

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

2 3 4 下一页

投稿

拖拽翻页(ThrowPage)详解 cool

猜你喜欢