爱飞 发表于 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+"页拖拽翻页</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.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><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>

布局层
要把一个目次的内容按页睁开,该怎样写呢?大概是如许,最少我就是这么写的
<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进行控制。

乐观 发表于 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]
查看完整版本: DIV教程之网页制造教程:制造拖拽翻页