javascript实现炫酷的拖动分页
作者:hebedich 发布时间:2024-06-19 01:46:04
标签:javascript,拖动分页
javascript实现炫酷的拖动分页
js
<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>
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>
html:
<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=#>恋曲1980</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>
以上所述就是本文的全部内容了,希望大家能够喜欢。
0
投稿
猜你喜欢
- 见下表:序号保留字序号保留字序号保留字1ADD80ESCAPE159OR2ABSOLUTE81EXCEPT160ORDER3ACTION82
- 启动sql server Net Start MSSqlServer 暂停sql server Net Pause MSSqlServer
- 前言本文主要给大家介绍了关于Django中CBV和FBV的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。一、&n
- 更加颗粒级的缓存框架使用方法是对单个视图的输出进行缓存。 django.views.decorators.cache定义了一个自动缓存视图响
- 只做简单地记录,方便一下使用!python关于csv模块的介绍网上有很多资料,这里就不在赘诉。直接给出代码和解释。数据:Symbol,Pri
- 1:为什么我得不到变量 我在一网页向另一网页POST数据name,为什么输出$name时却得不到任何值? 在PHP4.2以后的版本中regi
- 在使用柱状图时,经常遇到需要多组数据进行比较的情况。绘制单个数据系列的柱形图比较简单,多组数据柱状图绘制的关键有三点:多次调用bar()函数
- 周末在家,儿子闹着要玩游戏,让玩吧,不利于健康,不让玩吧,扛不住他折腾,于是想,不如一起搞个小游戏玩玩!之前给他编过猜数字 和 掷骰子 游戏
- 一、什么是数字识别? 所谓的数字识别,就是使用算法自动识别出图片中的数字。具体的效果如下图所示:上图展示了算法的处理效果,算法能够自动的识
- 1.由于数据库设计问题造成SQL数据库新增数据时超时症状:Microsoft OLE DB Provider for SQL Server
- 前言在对网站整体性能进行benchmark时,可以使用多种工具,比如大名鼎鼎的ab(Apache bench),http_load等工具。这
- 问题你想根据一组语法规则解析文本并执行命令,或者构造一个代表输入的抽象语法树。 如果语法非常简单,你可以不去使用一些框架,而是自己写这个解析
- 有时候会需要通过从保存下来的ckpt文件来观察其保存下来的训练完成的变量值。ckpt文件名列表:(一般是三个文件)xxxxx.ckpt.da
- Python实现GIF动图的提取及合成在开始之前,先来一个动图开头(预览)图片转GIF动图1、准备工作在开始合并前,先明确要转换哪些图片,以
- Oracle RAC提供两种方式实现负载均衡,第一种是纯技术手段,即在用户连接时,根据系统当前的负载情况决定由哪个节点处理用户请求;第二种是
- min()方法返回它的参数最小值:最接近负无穷大的值。语法以下是min()方法的语法:min( x, y, z, .... )参
- 最近遇到一个情景,就是定期生成并发送服务器使用情况报表,按照不同维度统计,涉及python对excel的操作,上网搜罗了一番,大多大同小异,
- OpenCV的全称是:Open Source Computer Vision Library。OpenCV是一个基于(开源)发行的跨平台计算
- 已知有一个XML文件(bookstore.xml)如下:<?xml version="1.0" encoding=
- 前言文章包括下几点:考点--操作SQLite数据库:创建SQLite数据库;向表中插入记录;其他数据库操作。面试题:1.面试题一:如何创建S