[存]超酷JS拖拽翻页效果

DEMO: http://www.lanrentuku.com/js/other-670.html

代码

< 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 >

 

 

转载于:https://www.cnblogs.com/sofire/archive/2009/12/03/1615846.html