|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。
网页制造Poluoluo文章简介：拖拽翻页(ThrowPage)详解.
底本是为本人的博客网站计划的，周二发生的灵感，周三周四逃课两天年坐标，周五回家，到薄暮才算写出了初版，公布以后没想到评价还不错，今后太多人问我这个效果应当怎样修正，才干用到本人的网站上，以是如今发这个帖子具体注释一下这个效果的道理
在此正式将此效果定名为ThrowPage，并且我一定会持续完美这个效果，并公布封装好的代码，便利人人挪用，大概一个月后，也大概一年后，InMeGodTrust
本文将按布局层、体现层、举动层三层分隔的按次来写：
运转代码框
<html><head><title>ThrowPage</title><styletype="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:1pxsolid#999;}ul{list-style:none;height:320px;margin:20px;padding:0px;background:#EEE;}li{font-size:12px;height:20px;line-height:20px;border-bottom:1pxdashed#999;}lispan{float:right;}lia{color:#000;text-decoration:none;}lia:hover{text-decoration:underline;}.tip{display:block;height:20px;margin:0px20px;line-height:20px;text-align:center;font-size:12px;background:#999;}</style></head><body><scripttype="text/javascript">functionid(obj){returndocument.getElementById(obj);}varpage;varmx;varmd=false;varsh=0;varen=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.innerHTML+="<spanclass="tip">"+(i+1)+"/"+page.length+"页拖拽翻页</span>";page.id="page"+i;page.i=i;page.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.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){varcu=(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){varcu=(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.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);}}}functionflyout(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));}}}functionflyin(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><divid="menu"><divclass="page"><ul><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">朋友</a></li><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">俊丽岛</a></li><listyle="background:coral;"><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">舞女</a></li><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">手牵手</a></li><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">初恋的少年家</a></li></ul></div><divclass="page"><ul><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">啊！停不住的爱人</a></li><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">网路</a></li><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">倾城之雨</a></li><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">旧事2000</a></li><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">绿色可怕份子</a></li></ul></div><divclass="page"><ul><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">光阴在渐渐消散</a></li><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">和平温泉</a></li><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">变天开花</a></li><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">阿辉饲了一只狗</a></li><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">真的假的</a></li><li><span>09-11-25</span><ahref="http://www.Poluoluo.com"target="_blank">南台湾仔共</a></li></ul></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
布局层
要把一个目次的内容按页睁开，该怎样写呢？大概是如许，最少我就是这么写的
<divid="menu">
<divclass="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>
<spanclass="tip">1/2页拖拽翻页</span>
</div>
<divclass="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>
<spanclass="tip">2/2页拖拽翻页</span>
</div>
</div>
<ul>是每页的列表，图中的浅灰色色部分
<li>是列表中的一条，图中的珊瑚色部分
<spanclass="tip">是不该该呈现在xhtml中的，应当由js增加，它是每页上面的索引标识，图中的深灰色部分
<divclass="page">是目次中的页，图中的红色部分
<divid="menu">是包括了一切页的目次，图中的亮蓝色部分。固然，假如页面中除这个效果外没有其他器材的话，这个标签也能够不写，那末一切<divclass="page">的父标签就是<body>
也许你会说，目次也应当是<ul>，以是应当这么写
<ulid="menu">
<liclass="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>
<spanclass="tip">1/2页拖拽翻页</span>
</li>
<ulclass="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>
<spanclass="tip">2/2页拖拽翻页</span>
</li>
</li>
如许的确更切合语意，不外成绩即刻就来了
网页制造Poluoluo文章简介：拖拽翻页(ThrowPage)详解.
体现层
怎样给下面的嵌套列表界说CSS呢？假如万恶的IE6撑持子工具选择符“>”，成绩很复杂。但为了兼容IE6和包管xhtml部分的简介，在前面另我抓狂的测试中，终极保持了嵌套列表的计划（现实上，page类都是由js静态设置的）。
让ThrowPage使用到你的网页中，实在端赖为页面界说分歧的CSS完成的，但有几点必定要注重。
<divid="menu">应当设置(overflow:hidden)，不然动画过程当中大概呈现转动条，影响效果;
每一个<divclass="page">必需是相对定位(position:absolute;)
假如但愿呈现<spanclass="tip">，要为其预留空间，而且<ul>是应当有流动高度的
不要用IE6的AlphaImageLoader滤镜为<divclass="tip">增加PNG背景，那会让下面的链接在IE6中生效
临时就想到这么多，实在另有一些值得注重的，将鄙人一节作申明
下面图中的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:1pxsolid#999;
}
ul{
list-style:none;
height:320px;
margin:20px;
padding:0px;
background:#EEE;
}
li{
font-size:12px;
height:20px;
line-height:20px;
border-bottom:1pxdashed#999;
}
lispan{
float:right;
}
lia{
color:#000;
text-decoration:none;
}
lia:hover{
text-decoration:underline;
}
.tip{
display:block;
height:20px;
margin:0px20px;
line-height:20px;
text-align:center;
font-size:12px;
background:#999;
}
网页制造Poluoluo文章简介：拖拽翻页(ThrowPage)详解.
举动层
先复杂说一下拖动是怎样完成的
个中，A是相对定位的，而且有一个left值a，当鼠标在下面按下（onmousedown）时，纪录下b值，相减算出c值
varc;
*.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，实在效果的前半段就是尺度的横向拖动
后面为<divclass="page">界说了一个left值，假如想居中的话，这个值应为
(<divid="menu">宽-<divclass="page">宽)/2
相沿下面的例子，用到的几个坐标以下图
BD为<divclass="page">的初始地位
AB为动画中最左形态地位，DE为最右地位
固然，OF能够小于3倍BD，A将小于0，E将年夜于F
注：假如你是用
.page{
position:absolute;
width:xpx;
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
网页制造Poluoluo文章简介：拖拽翻页(ThrowPage)详解.
附：原帖一些反应成绩和倡议的会合回应
- 页面内容没法选择和复制的成绩
这个成绩很贫苦的，来看看其他先烈碰到文本带链接的成绩是怎样办理的
- Word-------按住Ctrl点击翻开链接
- Emeditor-------点击间接翻开链接，没法选择链接中的部份内容
- 扫瞄器-------同上
- FoxitReader-------切换到编纂形式选择
- 加了尺度头后效果丧失成绩
给代码中一切的地位值加上"px"，实在很复杂的事理，反省假如一切代码切合xhtml尺度，效果就不会丧失了
- 多扫瞄器兼容的成绩
IE6应当是最头疼的扫瞄器了吧，以是我选择了IE6＋FF3的编写和测试情况，其他已测试的扫瞄器包含Opera、Safari和Chrome，测试时都是最新版本，假如在BI的代码框里没法运转，那末保留到当地必定是能够的
- 前背景代码的成绩
已只管简化了xhtml部分，效果也是在前台完成的，和背景的接洽不年夜，背景只卖力按格局输入本文入手下手时的谁人列表就能够了
- 内存泄露成绩
比来正在进修闭包，试着把全局变量都写进函数，办理内存泄露成绩，GodBlessMe，GodBlessCHINA
- 数据量过年夜时的卡机成绩
再次声名，这个效果最后是我为博客目次计划的，不合适大批数据的排列
何况，看小说和查字典不是一个心态，小说是一页一页翻看的，字典是对着页码查找的
拖拽200多页只为找篇文章，不以为如许的计划很失利么
- 小间隔拖拽不举行效果的倡议
本文看分明了就应当晓得怎样改了吧，就在onmouseup时的坐标判断那边，不外我没有改的盘算，不当心翻过了，再拖归去就能够了
本文写得仓皇，假如文中呈现任何毛病，但愿人人多做自我品评，接待可贵倡议，回绝偶然义嘉赞贴（MM除外）
</p>
另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:31:52
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜