非常酷的鼠标拖拽翻页效果，值得收藏。
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,广告代码,codesocang.com,sky,www.codesocang.com,源码搜藏网" />
<meta name="description" content="www.codesocang.com,源码搜藏网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在源码搜藏网" />
<title>非常酷的鼠标拖拽翻页效果，codesocang整理收集，源码搜藏网欢迎您。</title>
<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;">
<a href="http://www.codesocang.com/">源码搜藏网</a>,站长必备的高质量网页特效和广告代码。codesocang.com，站长js特效。<hr>
<!--欢迎来到源码搜藏网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.codesocang.com，codesocang@msn.com,用.net打造靓站-->
<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);
}
} //欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
}
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;
}
} //欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
}
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));
} //欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
}
}
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;
}
} //欢迎来到源码搜藏网，我们的网址是www.codesocang.com，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
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-9 12:35</span><a href="http://www.codesocang.com">源码搜藏网</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">啊！停不住的爱人</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">宁静温泉</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">你的样子</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=3">恋曲1980</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">恋曲1990</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=3">恋曲2000</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">亚细亚的孤儿</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">伴侣</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">童年</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">源码搜藏网</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">爱人同志</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">思念</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">母亲</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">是否</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=5">牧童</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">青春舞曲</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">蒲公英</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">未来的主人翁</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">如今才是唯一</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">codesocang.com</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">弹唱词</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">飞车</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=1">东方之珠</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=3">滚滚红尘</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">光阴的故事</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=3">之乎者也</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">现象七十二变</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">乡愁四韵</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">穿过你的黑发我的手</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">源码搜藏网</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">歌</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com/?cat=3">黄色面孔</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">台北红玫瑰</a></li>
<li><span>2009-4-9 12:35</span><a href="http://www.codesocang.com">我所不能了解的事</a></li>
</ul>
</div>
</body>
</html>