设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 我们致力于打造专业的站长资讯、交流、合作平台!
热搜: 创业者 手机 站长之家
当前位置: 首页 > 服务器 > 搭建环境 > Windows > 正文

javascript实现炫酷的拖动分页

发布时间:2016-11-24 05:44 所属栏目:[Windows] 来源:
导读:非常酷的javascript拖动分页功能,无缝循环分页,拖动鼠标即可完成分页,鼠标向左拖动回到前一页,向右拖动则翻开第二页,还带有动画特效,着实很不错,界面黑色,非主流风格,相信很多人会喜欢的。

javascript实现炫酷的拖动分页

js

lt;htmlgt;
lt;headgt;
lt;titlegt;拖动分页lt;/titlegt;
lt;meta http-equiv=content-type content="text/html; charset=gb2312"gt;
lt;stylegt;
body{
border:0px;
margin:0px;
overflow:hidden;
background-color:transparent;
}
.page{
position:absolute;
width:700px;
border:1px solid #999;
background-color:#000;
left:425px;
margin-left:-350px;
cursor:default;
z-index:0;
}
ul{
height:320px;
list-style:none;
margin:40px 50px 0px;
padding:0px;
}
li{
width:100%;
height:30px;
line-height:30px;
font-size:14px;
text-align:left;
border-bottom:1px dashed #999;
}
a{
text-decoration:none;
color:#999;
}
a:hover{
font-weight:bold;
}
li span{
float:right;
color:#999;
}
.tip{
display:block;
width:100%;
font-size:12px;
color:#999;
text-align:center;
margin:10px 0px 20px;
}


lt;/stylegt;
lt;/headgt;
lt;body onselectstart="return false;"gt;
lt;scriptgt;
function id(obj){
return document.getElementById(obj);
}
var page;
var lm,mx;
var md=false;
var sh=0;
var en=false;
window.onload=function(){
page=document.getElementsByTagName("div");
if(page.lengthgt;0){
page[0].style.zIndex=2;
}

for(i=0;ilt;page.length;i++){
page[i].className="page";
page[i].innerHTML+="lt;span class="tip"gt;第 "+(i+1)+"/"+page.length+" 页 提示:左右拖拽翻页lt;/spangt;";
page[i].id="page"+i;
page[i].i=i;
page[i].onmousedown=function(e){
if(!en){
if(!e){e=e||window.event;}
lm=this.offsetLeft;
mx=(e.pageX)#63;e.pageX:e.x;
this.style.cursor="w-resize";
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;}
var ex=(e.pageX)#63;e.pageX:e.x;
this.style.left=ex-(mx-lm)+350;
if(this.offsetLeftlt;75){
var cu=(this.i==0)#63;page.length-1:this.i-1;
page[sh].style.zIndex=0;
page[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}

if(this.offsetLeftgt;75){
var cu=(this.i==page.length-1)#63;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(document.all){
this.releaseCapture();
}else{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
flyout(this);
}
}
}

function flyout(obj){
if(obj.offsetLeftlt;75){
if( (obj.offsetLeft + 350 - 20) gt; -275 ){
obj.style.left=obj.offsetLeft + 350 - 20;
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}else{
obj.style.left=-275;
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
if(obj.offsetLeftgt;75){
if( (obj.offsetLeft + 350 + 20) lt; 1125 ){
obj.style.left=obj.offsetLeft + 350 + 20;
window.setTimeout("flyout(id('"+obj.id+"'));",0);
}else{
obj.style.left=1125;
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
}
function flyin(obj){
if(obj.offsetLeftlt;75){
if( (obj.offsetLeft + 350 + 20) lt; 425 ){
obj.style.left=obj.offsetLeft + 350 + 20;
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}else{
obj.style.left=425;
en=false;
}
}
if(obj.offsetLeftgt;75){
if( (obj.offsetLeft + 350 - 20) gt; 425 ){
obj.style.left=obj.offsetLeft + 350 - 20;
window.setTimeout("flyin(id('"+obj.id+"'));",0);
}else{
obj.style.left=425;
en=false;
}
}
}
lt;/scriptgt;

html:

lt;divgt;
lt;ulgt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;东方之珠lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;啊!爱人lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;宁静温泉lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;你的样子lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;恋曲1980lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;恋曲1980lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;恋曲2000lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;亚细亚的孤儿lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;童年lt;/agt;lt;/ligt;
lt;/ulgt;
lt;/divgt;
lt;divgt;
lt;ulgt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;弹唱词lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;飞车lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;东方之珠lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;滚滚红尘lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;光阴的故事lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;之乎者也lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;现象七十二变lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;乡愁四韵lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;穿过你的黑发我的手lt;/agt;lt;/ligt;
lt;/ulgt;
lt;/divgt;
lt;divgt;
lt;ulgt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;大兵歌lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;黄色面孔lt;/agt;lt;/ligt;
lt;ligt;lt;spangt;2009-4-29 02:16lt;/spangt;lt;a href=#gt;台北红玫瑰lt;/agt;lt;/ligt;
lt;/ulgt;
lt;/divgt;
lt;/bodygt;
lt;/htmlgt;

以上所述就是本文的全部内容了,希望大家能够喜欢。

(编辑:ASP站长网)

    网友评论
    推荐文章