Js拖拽翻页

2024-09-05 12:18:22

字体：大中小

来源：转载

供稿：网友

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

<!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第 '+(i+1)+'/'+aDiv.length+' 页 提示：左右拖拽翻页';		aDiv[i].onmousedown=drag;	}	for(i=0;i=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;i0) || (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东方之珠</li>			<li>2009-4-9 12:35啊！爱人</li>			<li>2009-4-9 12:35宁静温泉</li>			<li>2009-4-9 12:35你的样子</li>			<li>2009-4-9 12:35恋曲1980</li>			<li>2009-4-9 12:35恋曲1990</li>			<li>2009-4-9 12:35恋曲2000</li>			<li>2009-4-9 12:35亚细亚的孤儿</li>			<li>2009-4-9 12:35伴侣</li>			<li>2009-4-9 12:35童年</li>		</ul>	</div>	<div>		<ul>			<li>2009-4-9 12:35爱的箴言</li>			<li>2009-4-9 12:35爱人同志</li>			<li>2009-4-9 12:35思念</li>			<li>2009-4-9 12:35母亲</li>			<li>2009-4-9 12:35是否</li>			<li>2009-4-9 12:35牧童</li>			<li>2009-4-9 12:35青春舞曲</li>			<li>2009-4-9 12:35蒲公英</li>			<li>2009-4-9 12:35未来的主人翁</li>			<li>2009-4-9 12:35如今才是唯一</li>		</ul>	</div>	<div>		<ul>			<li>2009-4-9 12:35暗恋</li>			<li>2009-4-9 12:35弹唱词</li>			<li>2009-4-9 12:35飞车</li>			<li>2009-4-9 12:35东方之珠</li>			<li>2009-4-9 12:35滚滚红尘</li>			<li>2009-4-9 12:35光阴的故事</li>			<li>2009-4-9 12:35之乎者也</li>			<li>2009-4-9 12:35现象七十二变</li>			<li>2009-4-9 12:35乡愁四韵</li>			<li>2009-4-9 12:35穿过你的黑发我的手</li>		</ul>	</div>	<div>		<ul>			<li>2009-4-9 12:35大兵歌</li>			<li>2009-4-9 12:35歌</li>			<li>2009-4-9 12:35黄色面孔</li>			<li>2009-4-9 12:35台北红玫瑰</li>			<li>2009-4-9 12:35我所不能了解的事</li>		</ul>	</div></div></body></html>

上一篇：让Alert弹窗只弹出一次

下一篇：Js点击全屏的代码