Js拖拽翻页 - 手册网

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖拽翻页</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px; overflow:hidden;}
img{border:0;}
li{list-style:none;}

#drag{
	width:682px;
	color:#fff;
	position:relative;
	margin:50px auto 0 auto;
	font-family:"Microsoft YaHei", "宋体";
}
#drag ul{
}
#drag ul li{
	text-align:right;
	height:30px;
	line-height:30px;
	overflow:hidden;
	vertical-align:middle;
	font-size:14px;
	border-bottom:1px dashed #fff;
}
#drag ul li span{
	float:right;
}
#drag ul li a{
	float:left;
	color:#fff;
	text-decoration:none;
}
#drag div{
	width:600px;
	height:350px;
	padding:40px;
	background:#77521d;
	cursor:e-resize;
 border:1px solid #999;
	position:absolute;
	left:0;
	top:0;
}
#drag div p{
	width:100%;
	padding-bottom:20px;
	text-align:center;
	position:absolute;
	bottom:0;
	left:0;
}
</style>
<script type="text/javascript">
window.onload=function()
{
	var oDrag=document.getElementById('drag');
	var aDiv=oDrag.getElementsByTagName('div');
	var aLink=oDrag.getElementsByTagName('a');
	var i=0;
	for(i=0;i<aDiv.length;i++)
	{
		aDiv[i].style.zIndex=(i+1);
		aDiv[i].innerHTML+='第 '+(i+1)+'/'+aDiv.length+' 页 提示：左右拖拽翻页';
		aDiv[i].onmousedown=drag;
	}
	for(i=0;i<aLink.length;i++)
	{
		aLink[i].onmousedown=function(ev)
		{
			var oEvent=ev||event;
			oEvent.stopPropagation?oEvent.stopPropagation():oEvent.cancelBubble=true;
		};
	}
};
function drag(ev)
{
	var obj=this;
	var mouseStart=[];
	var objStart=[];
	var oEvent=ev||event;
	mouseStart.x=oEvent.clientX;
	objStart.x=this.offsetLeft;
	document.onmousemove=function(ev)
	{
		var oEvent=ev||event;
		var l=oEvent.clientX-mouseStart.x+objStart.x;
		var t=oEvent.clientY-mouseStart.y+objStart.y;
		
		obj.style.left=l+'px';
		
		return false;
	};
	document.onmouseup=function()
	{
		document.onmousemove=document.onmouseup=null;
		startMove(obj);
	};
	return false;
}
	
function startMove(obj)
{
	var oDrag=document.getElementById('drag');
	var aDiv=oDrag.getElementsByTagName('div');
	var iSpeed=0;
	obj.timer=setInterval(function(){
		obj.onmousedown=null;
		obj.offsetLeft>=0?iSpeed+=10:iSpeed-=10;
		var l=obj.offsetLeft+iSpeed;
		if(l>obj.offsetWidth)
		{
			l=obj.offsetWidth;
			moveDirection(iSpeed);
		}
		else if(l<-obj.offsetWidth)
		{
			l=-obj.offsetWidth;
			moveDirection(iSpeed);
		}
		obj.style.left=l+'px';
	},30);
	function moveDirection(iSpeed)
	{
		for(i=0;i<aDiv.length;i++)
		{
			aDiv[i].style.zIndex=parseInt(aDiv[i].style.zIndex)+1;
			if(aDiv[i]==obj)
			{
				obj.style.zIndex=parseInt(obj.style.zIndex)-aDiv.length;
			}
		}
		clearInterval(obj.timer);
		t=setInterval(function(){
			obj.onmousedown=null;
			var l=obj.offsetLeft-iSpeed;
			
			if((iSpeed<0 && l>0) || (iSpeed>0 && l<0))
			{
				l=0;
				clearInterval(t);
				obj.onmousedown=drag;
			}
			obj.style.left=l+'px';
		},30);
	}
}
</script>
</head>
<body>
<div id="drag">
	<div>
		<ul>
			<li>2009-4-9 12:35<a target="_blank" href="#">东方之珠</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">啊！爱人</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">宁静温泉</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">你的样子</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">恋曲1980</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">恋曲1990</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">恋曲2000</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">亚细亚的孤儿</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">伴侣</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">童年</a></li>
		</ul>
	</div>
	<div>
		<ul>
			<li>2009-4-9 12:35<a target="_blank" href="#">爱的箴言</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">爱人同志</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">思念</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">母亲</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">是否</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">牧童</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">青春舞曲</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">蒲公英</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">未来的主人翁</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">如今才是唯一</a></li>
		</ul>
	</div>
	<div>
		<ul>
			<li>2009-4-9 12:35<a target="_blank" href="#">暗恋</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">弹唱词</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">飞车</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">东方之珠</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">滚滚红尘</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">光阴的故事</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">之乎者也</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">现象七十二变</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">乡愁四韵</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">穿过你的黑发我的手</a></li>
		</ul>
	</div>
	<div>
		<ul>
			<li>2009-4-9 12:35<a target="_blank" href="#">大兵歌</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">歌</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">黄色面孔</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">台北红玫瑰</a></li>
			<li>2009-4-9 12:35<a target="_blank" href="#">我所不能了解的事</a></li>
		</ul>
	</div>
</div>
</body>
</html>

​x
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖拽翻页</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:12px; overflow:hidden;}
img{border:0;}
li{list-style:none;}
​
#drag{
    width:682px;
    color:#fff;
    position:relative;

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

Js拖拽翻页

分类

网站常用

描述

以前看到一个很火的帖子，拖拽实现的翻页效果，非常的有创意，自己也很喜欢，于是乎就萌发了用自己的方法模仿的想法。感谢原创作者的创意，结果一样，但过程不一样哦。奉上代码，供大家参考。