DEMO: http://www.lanrentuku.com/js/other-670.html
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<
html
>
< head >
< title > blog </ title >
< meta http-equiv =content-type content ="text/html; charset=gb2312" >
< 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 >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 东方之珠 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 啊!停不住的爱人 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 宁静温泉 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 你的样子 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 恋曲1980 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 恋曲1990 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 恋曲2000 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 亚细亚的孤儿 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 伴侣 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 童年 </ a ></ li >
</ ul >
</ div >
< div >
< ul >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 爱的箴言 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 爱人同志 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 思念 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 母亲 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 是否 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 牧童 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 青春舞曲 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 蒲公英 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 未来的主人翁 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 如今才是唯一 </ a ></ li >
</ ul >
</ div >
< div >
< ul >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 暗恋 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 弹唱词 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 飞车 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 东方之珠 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 滚滚红尘 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 光阴的故事 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.oern.cn > 之乎者也 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 现象七十二变 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 乡愁四韵 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 穿过你的黑发我的手 </ a ></ li >
</ ul >
</ div >
< div >
< ul >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 大兵歌 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 歌 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 黄色面孔 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 台北红玫瑰 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 我所不能了解的事 </ a ></ li >
</ ul >
</ div >
</ body >
</ html >
< head >
< title > blog </ title >
< meta http-equiv =content-type content ="text/html; charset=gb2312" >
< 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 >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 东方之珠 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 啊!停不住的爱人 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 宁静温泉 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 你的样子 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 恋曲1980 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 恋曲1990 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 恋曲2000 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 亚细亚的孤儿 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 伴侣 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 童年 </ a ></ li >
</ ul >
</ div >
< div >
< ul >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 爱的箴言 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 爱人同志 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 思念 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 母亲 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 是否 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 牧童 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 青春舞曲 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 蒲公英 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 未来的主人翁 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 如今才是唯一 </ a ></ li >
</ ul >
</ div >
< div >
< ul >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 暗恋 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 弹唱词 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 飞车 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 东方之珠 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 滚滚红尘 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 光阴的故事 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.oern.cn > 之乎者也 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 现象七十二变 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 乡愁四韵 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 穿过你的黑发我的手 </ a ></ li >
</ ul >
</ div >
< div >
< ul >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 大兵歌 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 歌 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 黄色面孔 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 台北红玫瑰 </ a ></ li >
< li >< span > 2009-4-9 12:35 </ span >< a href =http://www.lanrentuku.com > 我所不能了解的事 </ a ></ li >
</ ul >
</ div >
</ body >
</ html >