HTML分页

步青龙

浏览: 298757 次
性别:
来自: 杭州

最近访客更多访客>>

Franciswmf

wangchen.ily

jzwjzwjzw11

flyfoxs

博主相关

博客

微博

相册

留言

关于我

博客专栏

: Java面试
浏览量：0

文章分类

社区版块

存档分类

博客分类：

JavaScript

HTML JavaScript

<html>
<head>
<title>拖动分页</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<style>
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;}
</style>
</head>
<body onselectstart="return false;">
<script type="text/javascript" language="javascript">
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.length>0){
  page[0].style.zIndex=2;
 }
 for(i=0;i<page.length;i++){
  page[i].className="page";
  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;}
    lm=this.offsetLeft;
    mx=(e.pageX)?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)?e.pageX:e.x;
    this.style.left=ex-(mx-lm)+350;
    if(this.offsetLeft<75){
     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>75){
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(document.all){
    this.releaseCapture();
   }else{
    window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
   }
   flyout(this);
  }
 }
}

function flyout(obj){
 if(obj.offsetLeft<75){
  if(  (obj.offsetLeft + 350 - 20) > -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.offsetLeft>75){
  if(  (obj.offsetLeft + 350 + 20) < 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.offsetLeft<75){
  if(  (obj.offsetLeft + 350 + 20) < 425  ){
   obj.style.left=obj.offsetLeft + 350 + 20;
   window.setTimeout("flyin(id('"+obj.id+"'));",0);
  }else{
   obj.style.left=425;
   en=false;
  }
 }
 if(obj.offsetLeft>75){
  if(  (obj.offsetLeft + 350 - 20) > 425  ){
   obj.style.left=obj.offsetLeft + 350 - 20;
   window.setTimeout("flyin(id('"+obj.id+"'));",0);
  }else{
   obj.style.left=425;
   en=false;
  }
 }
}
</script>
<div>
 <ul>
  <li><span>2009-4-29 02:16</span><a href=#>东方之珠</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>啊！爱人</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>宁静温泉</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>你的样子</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>恋曲1980</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>源代码下载</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>恋曲2000</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>亚细亚的孤儿</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>童年</a></li>
 </ul>
</div>
<div>
 <ul>

  <li><span>2009-4-29 02:16</span><a href=#>弹唱词</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>飞车</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>东方之珠</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>滚滚红尘</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>光阴的故事</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>之乎者也</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>现象七十二变</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>乡愁四韵</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>穿过你的黑发我的手</a></li>
 </ul>
</div>
<div>
 <ul>
  <li><span>2009-4-29 02:16</span><a href=#>大兵歌</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>黄色面孔</a></li>
  <li><span>2009-4-29 02:16</span><a href=#>台北红玫瑰</a></li>
 </ul>
</div>
</body>
</html>

分享到：

上传图片图片服务器 | study

2010-11-04 16:37
浏览 1512
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

HTML分页

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

HTML分页

评论

发表评论

相关推荐

jquery的幻灯片效果

Ajax

prototype

Javascript 面向对象

Javascript 作用域与this的用法

分享一款前端远程调试开发利器Fidder web Debugger

Javascript 特殊的对象声明与this作用域

Javascript Date的基本特点

Javascript Array的一些用法

Javascript Array的基本特点

Javascript Object 用法

Javascript 基本概念

使用Javascript

jquery formValdator 插件那些破事儿

互联网倒计时应用

Jquery 简单的漂亮HTML表单元素

常用JS 判断总结

js function

本地图片效果

css圆角效果

最近访客更多访客>>