JS实现鼠标拖拽翻页效果文章列表(div+ul+li)-网页特效-懒人建站

JS实现鼠标拖拽翻页效果文章列表(div+ul+li)

JS实现鼠标拖拽翻页效果的文章列表。DIV UL LI 结构。此代码目前有点遗憾，对火狐的支持不太好，如果不声明DTD 倒是可以运行。期待有高手修改成兼容性很强的鼠标拖拽翻页效果。

<!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>
<title>JS实现鼠标拖拽翻页效果文章列表_懒人建站 http://www.51xuediannao.com</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<meta name="keywords" content="HTML+CSS模板,HTML+CSS教程,HTML+CSS导航菜单,FLASH焦点图,网页特效" />
<meta name="description" content="懒人建站为您提供-HTML+CSS模板，HTML+CSS教程，JS广告代码，HTML+CSS导航菜单，FLASH焦点图片，国外网页设计欣赏与模板和CSS技巧。" />
<style>
body{
	border:0px;
	margin:0px;
	overflow:hidden;
	background-color:transparent;
	font-family:宋体;
}
.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>
<div>
<ul>
<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091208/jsdongtaicss.html" title="JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式">JS判断浏览器类型和屏幕分辨率来调用不同的CS</a></li>
<li><a href="http://www.51xuediannao.com/jiqiao/cms/20091208/dedecmstag.html" title="织梦(dedecms)的tags字数限制的修改">织梦(dedecms)的tags字数限制的修改</a></li>
<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091202/web2.0nav.html" title="流行的欧美web2.0风格导航菜单集合">流行的欧美web2.0风格导航菜单集合</a></li>
<li><a href="http://www.51xuediannao.com/jiqiao/css/20091126/cssanli.html" title="页面应用半透明PNG背景IE7下浏览会变慢的解决">页面应用半透明PNG背景IE7下浏览会变慢的解决</a></li>
<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091123/chakanyuanma2.html" title="JS清空网页代码防止查看源代码是个骗局">JS清空网页代码防止查看源代码是个骗局</a></li>
<li><a href="http://www.51xuediannao.com/jiqiao/css/20091121/cssjuzhong2.html" title="HTML+CSS垂直居中其实很简单">HTML+CSS垂直居中其实很简单</a></li>
<li><a href="http://www.51xuediannao.com/jiqiao/css/20091121/cssjuzhong.html" title="HTML+CSS水平居中其实很简单">HTML+CSS水平居中其实很简单</a></li>
<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091121/dingwei.html" title="网站定位需要实事求是">网站定位需要实事求是</a></li>
<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091111/flashxuxiankuang.html" title="去掉IE中鼠标滑过flash文件四周的虚线框">去掉IE中鼠标滑过flash文件四周的虚线框</a></li>
<li><a href="http://www.51xuediannao.com/jiqiao/qita/20091111/lianjiexuxian.html" title="去掉IE中链接的虚线框方法集合">去掉IE中链接的虚线框方法集合</a></li>

</ul>
</div>
<div>
<ul>
<li><a href="http://www.51xuediannao.com/JS/nav/20091207/jquery4nav.html"  title="Jquery四种苹果风格导航菜单(横向/竖向/向上/向下)">Jquery四种苹果风格导航菜单(横向/竖向/向上/向下</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091205/Jquerynav.html"  title="">Jquery二级导航菜单可弹出下拉层 UL/LI结构</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091202/jquery huadong.html"  title="jquery动感滑动蓝色导航菜单(类似flash效果)">jquery动感滑动蓝色导航菜单(类似flash效果)</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091202/ullidaohang.html"  title="UL LI结构实现二级导航菜单(HTML+CSS+JS)">UL LI结构实现二级导航菜单(HTML+CSS+JS)</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091125/weiruan1.html"  title="纯HTML+CSS类似微软中国首页的竖向选项卡">纯HTML+CSS类似微软中国首页的竖向选项卡</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091124/shuxiangnav2.html"  title="HTML+CSS竖向折叠点击展开的两级菜单导航">HTML+CSS竖向折叠点击展开的两级菜单导航</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091124/jsflash.html"  title="JS实现类似flash渐隐效果的多级下拉导航菜单">JS实现类似flash渐隐效果的多级下拉导航菜单</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091101/156.html"  title="CSS+JS弧形导航菜单支持两级">CSS+JS弧形导航菜单支持两级</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091016/122.html"  title="无限级分类下拉式绿色导航菜单，符合标准代码结构清晰明了">无限级分类下拉式绿色导航菜单</a></li>
<li><a href="http://www.51xuediannao.com/JS/nav/20091015/119.html"  title="红色带二级滑动导航菜单">红色带二级滑动导航菜单</a></li>

</ul>
</div>
<div>
<ul>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091201/sanweiliti.html"  title="三维立体flash焦点幻灯片(Flash+XML)">三维立体flash焦点幻灯片(Flash+XML)</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091128/zuoyouqiehuan.html"  title="横向平滑分组切换由鼠标点击控制(HTML+CSS+JS)">横向平滑分组切换由鼠标点击控制(HTML+CSS+JS)</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091126/gmjiaodiantu.html"  title="国美电器商城首页焦点幻灯片(HTML+CSS+JS)">国美电器商城首页焦点幻灯片(HTML+CSS+JS)</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091125/wlbanner.html"  title="Flash+xml的未来广告公司焦点幻灯banner">Flash+xml的未来广告公司焦点幻灯banner</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091105/Windows banner.html"  title="微软中国MSN主页焦点幻灯片banner">微软中国MSN主页焦点幻灯片banner</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091103/yahoo.html"  title="中国雅虎新首页焦点幻灯片JS+CSS+HTML">中国雅虎新首页焦点幻灯片JS+CSS+HTML</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091027/148.html"  title="点击左右滚动按钮控制有图片和文字">点击左右滚动按钮控制有图片和文字</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091023/yokahuangdeng.html"  title="yoka时尚网焦点幻灯片">yoka时尚网焦点幻灯片</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091022/143.html"  title="点击左右滚动JS幻灯banner">点击左右滚动JS幻灯banner</a></li>
<li><a href="http://www.51xuediannao.com/JS/Slide/20091016/124.html"  title="自动循环图片展示幻灯片banner，不能选择第几张，符合标准，结构清晰">自动循环图片展示幻灯片banner</a></li>

</ul>
</div>
<div>
<ul>
            <li><a href="http://www.51xuediannao.com/show/blog/20091028/149.html" title="博客大巴中文博客界面设">博客大巴中文博客界面设</a></li>
<li><a href="http://www.51xuediannao.com/show/blog/20091009/59.html" title="黑色博客网站系列006">黑色博客网站系列006</a></li>
<li><a href="http://www.51xuediannao.com/show/blog/20091009/58.html" title="黑色博客网站系列005">黑色博客网站系列005</a></li>
<li><a href="http://www.51xuediannao.com/show/shop/20090928/55.html" title="清新淡雅的韩国服装商城">清新淡雅的韩国服装商城</a></li>
<li><a href="http://www.51xuediannao.com/show/blog/20090928/54.html" title="暖色调儿童博客网站">暖色调儿童博客网站</a></li>
<li><a href="http://www.51xuediannao.com/show/blog/20090928/53.html" title="欧美黄绿色调可作为博客">欧美黄绿色调可作为博客</a></li>
<li><a href="http://www.51xuediannao.com/show/qiye/20090928/52.html" title="欧美蓝色调企业类">欧美蓝色调企业类</a></li>
<li><a href="http://www.51xuediannao.com/show/qiye/20090928/51.html" title="欧美蓝灰色调">欧美蓝灰色调</a></li>
<li><a href="http://www.51xuediannao.com/show/blog/20090928/50.html" title="黑色欧美blog类系列-005">黑色欧美blog类系列-005</a></li>
<li><a href="http://www.51xuediannao.com/show/menhu/20090927/49.html" title="门户网站YOKA优卡时尚网">门户网站YOKA优卡时尚网</a></li>

</ul>
</div>

<div style="width:95%; height:auto; display:block; margin:0 auto; margin-top:30px; font-size:10pt; line-height:150%;">
<span>本代码由<a href="http://www.51xuediannao.com" style="color:#F00;">懒人建站网 收集整理</a> </span><br>
<a href="http://www.51xuediannao.com">懒人建站 http://www.51xuediannao.com</a><br /><br/>
<span>我们为您提供-HTML+CSS模板，HTML+CSS教程，JS广告代码，HTML+CSS导航菜单，FLASH焦点图片，国外网页设计欣赏与模板和CSS技巧。；</span><br />
<span>懒人建站只收录实用和能提高用户体验的代码</span><br />
<span>我们只想解放出你的部分写代码时间来思考更高层次的设计，而不是要你懒惰、拼凑。</span>
</div>

</body>
</html>

代码说明:

JS实现鼠标拖拽翻页效果的文章列表。DIV UL LI 结构。
此代码目前有点遗憾，对火狐的支持不太好，如果不声明DTD 倒是可以运行。
期待有高手修改成兼容性很强的鼠标拖拽翻页效果。

TAG标签

弹出层 jQuery 图片展示下拉菜单左右滚动选项卡二级导航 jQuery弹出层

来源：网络|发布人：懒人建站|2009-12-08|热度：次|收藏|报错

相关文章 鼠标滑过文章列表出现描述和头像