DIV教程之网页制造教程:制造拖拽翻页 background,absolute,position,网站设计,网页制作

爱飞发表于 2015-1-15 23:31:52

DIV教程之网页制造教程:制造拖拽翻页

搜索引擎更加友好。相对与传统的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.style.zIndex=2;}for(i=0;i<page.length;i++){page.innerHTML+="<spanclass="tip">"+(i+1)+"/"+page.length+"页拖拽翻页";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.style.zIndex=0;page.style.zIndex=1;this.style.zIndex=2;sh=cu;}if(this.offsetLeft>350){varcu=(this.i==page.length-1)?0:this.i+1;page.style.zIndex=0;page.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>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">朋友</a></li><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">俊丽岛</a></li><listyle="background:coral;">09-11-25<ahref="http://www.Poluoluo.com"target="_blank">舞女</a></li><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">手牵手</a></li><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">初恋的少年家</a></li></ul></div><divclass="page"><ul><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">啊！停不住的爱人</a></li><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">网路</a></li><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">倾城之雨</a></li><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">旧事2000</a></li><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">绿色可怕份子</a></li></ul></div><divclass="page"><ul><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">光阴在渐渐消散</a></li><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">和平温泉</a></li><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">变天开花</a></li><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">阿辉饲了一只狗</a></li><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">真的假的</a></li><li>09-11-25<ahref="http://www.Poluoluo.com"target="_blank">南台湾仔共</a></li></ul></div></div></body></html>

布局层
要把一个目次的内容按页睁开，该怎样写呢？大概是如许，最少我就是这么写的
<divid="menu">
<divclass="page">
<ul>
<li>09-11-25<a>恋曲1980</a></li>
<li>09-11-25<a>恋曲1990</a></li>
<li>09-11-25<a>恋曲2000</a></li>
<li>09-11-25<a>母亲</a></li>
</ul>
<spanclass="tip">1/2页拖拽翻页
</div>
<divclass="page">
<ul>
<li>09-11-25<a>朋友</a></li>
<li>09-11-25<a>忖量</a></li>
<li>09-11-25<a>童年</a></li>
<li>09-11-25<a>牧童</a></li>
</ul>
<spanclass="tip">2/2页拖拽翻页
</div>
</div>

<ul>是每页的列表，图中的浅灰色色部分
<li>是列表中的一条，图中的珊瑚色部分
<spanclass="tip">是不该该呈现在xhtml中的，应当由js增加，它是每页上面的索引标识，图中的深灰色部分
<divclass="page">是目次中的页，图中的红色部分
<divid="menu">是包括了一切页的目次，图中的亮蓝色部分。固然，假如页面中除这个效果外没有其他器材的话，这个标签也能够不写，那末一切<divclass="page">的父标签就是<body>
也许你会说，目次也应当是<ul>，以是应当这么写
<ulid="menu">
<liclass="page">
<ul>
<li>09-11-25<a>恋曲1980</a></li>
<li>09-11-25<a>恋曲1990</a></li>
<li>09-11-25<a>恋曲2000</a></li>
<li>09-11-25<a>母亲</a></li>
</ul>
<spanclass="tip">1/2页拖拽翻页
</li>
<ulclass="page">
<ul>
<li>09-11-25<a>朋友</a></li>
<li>09-11-25<a>忖量</a></li>
<li>09-11-25<a>童年</a></li>
<li>09-11-25<a>牧童</a></li>
</ul>
<spanclass="tip">2/2页拖拽翻页
</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除外）

另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。

乐观发表于 2015-1-17 23:06:44

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

深爱那片海 发表于 2015-1-25 20:19:56

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

再现理想 发表于 2015-2-4 01:21:56

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

柔情似水 发表于 2015-2-9 09:18:20

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

再见西城 发表于 2015-2-27 05:50:44

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

金色的骷髅 发表于 2015-3-9 00:11:22

可以使用 CSS 检查工具进行设计。

蒙在股里 发表于 2015-3-16 21:38:58

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

老尸发表于 2015-3-23 07:35:47

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

页: [1]

仓酷云's Archiver

DIV教程之网页制造教程:制造拖拽翻页