JavaScript结合css实现拖拽翻页的效果

发布时间:2020-02-27编辑:脚本学堂
为大家提供一个拖拽翻页效果的代码,javascript结合css实现的,按住鼠标左键向某一方向拖动即可完成分页动作,符合WEB标准,兼容多浏览器。有需要的朋友,可以参考下。

js拖拽翻页效果的代码。
 

复制代码 代码示例:
<html>
<head>
<title>拖拽翻页效果_脚本学堂_http://www.jb200.com</title>
<style type="text/css">
html,body{
    width:100%;
    height:100%;
    border:0px;
    margin:0px;
    overflow:hidden;
}
#menu{
    width:1000px;
    height:500px;
    overflow:hidden;
    background:lightblue;
}
.page{
    position:absolute;
    width:300px;
    height:400px;
    left:350px;
    top:50px;
    background:#FFF;
    border:1px solid #999;
}
ul{
    list-style:none;
    height:320px;
    margin:20px;
    padding:0px;
    background:#EEE;
}
li{
    
    font-size:12px;
    height:20px;
    line-height:20px;
    border-bottom:1px dashed #999;
}
li span{
    float:right;
}
li a{
    color:#000;
    text-decoration:none;
}
li a:hover{
    text-decoration:underline;
}
.tip{
    display:block;
    height:20px;
    margin:0px 20px;
    line-height:20px;
    text-align:center;
    font-size:12px;
    background:#999;
}
</style>
</head>
<body>
<script type="text/javascript">
function id(obj){
    return document.getElementById(obj);
}
var page;
var mx;
var md=false;
var sh=0;
var en=false;
window.onload=function(){
    page=id("menu").getElementsByTagName("div");
    if(page.length>0){
        page[0].style.zIndex=2;
    }
    for(i=0;i<page.length;i++){
        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;}
                ex=e.pageX?e.pageX:e.x;
                mx=350-ex;
                this.style.cursor="move";
                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;}
                ex=e.pageX?e.pageX:e.x;
                this.style.left=ex+mx+"px";
                if(this.offsetLeft<350){
                    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>350){
                    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(this.offsetLeft==350){
                en=false;
            }
            if(document.all){
                this.releaseCapture();
            }else{
                window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
            }
            flyout(this);
        }
    }
}
function flyout(obj){
    if(obj.offsetLeft < 350){
        if( (obj.offsetLeft - 10) > 50 ){
            obj.style.left=obj.offsetLeft - 10 + "px";
            window.setTimeout("flyout(id('"+obj.id+"'));",0);
        }else{
            obj.style.left= 50 +"px";
            obj.style.zIndex=0;
            flyin(id(obj.id));
        }
    }
    if(obj.offsetLeft > 350){
        if((obj.offsetLeft + 10) < 650){
            obj.style.left=obj.offsetLeft + 10 + "px";
            window.setTimeout("flyout(id('"+obj.id+"'));",0);
        }else{
            obj.style.left= 650 + "px";
            obj.style.zIndex=0;
            flyin(id(obj.id));
        }
    }
}
function flyin(obj){
    if(obj.offsetLeft<350){
        if((obj.offsetLeft + 10) < 350){
            obj.style.left=obj.offsetLeft + 10+"px";
            window.setTimeout("flyin(id('"+obj.id+"'));",0);
        }else{
            obj.style.left= 350 +"px";
            en=false;
        }
    }
    if(obj.offsetLeft>350){
        if((obj.offsetLeft - 10) > 350){
            obj.style.left=obj.offsetLeft - 10 +"px";
            window.setTimeout("flyin(id('"+obj.id+"'));",0);
        }else{
            obj.style.left=350+"px";
            en=false;
        }
    }
}
</script>
<div id="menu">
    <div class="page">
        <ul>
            <li><span>09-11-25</span><a href="/" target="_blank">RSA文件加密原理及代码实现</a></li>
            <li><span>09-11-25</span><a href="http://www.jb200.com" target="_blank">脚本学堂_www.jb200.com</a></li>
            <li style="background:coral;"><span>09-11-25</span><a href="/" target="_blank">项目管理软件PHP版</a></li>
            <li><span>09-11-25</span><a href="/" target="_blank">手牵手</a></li>
            <li><span>09-11-25</span><a href="/" target="_blank">少年的奇幻漂流记</a></li>
        </ul>
    </div>
    <div class="page">
        <ul>
            <li><span>09-11-25</span><a href="/" target="_blank">脚本学堂,欢迎大家的光临。</a></li>
            <li><span>09-11-25</span><a href="/" target="_blank">搜索引擎整合搜索系统</a></li>
            <li><span>09-11-25</span><a href="/" target="_blank">倾城之雨</a></li>
            <li><span>09-11-25</span><a href="/" target="_blank">往事2000</a></li>
            <li><span>09-11-25</span><a href="/" target="_blank">绿色恐怖分子</a></li>
        </ul>
    </div>
    <div class="page">
        <ul>
            <li><span>09-11-25</span><a href="/" target="_blank">时光在慢慢消失</a></li>
            <li><span>09-11-25</span><a href="/" target="_blank">宁静温泉</a></li>
            <li><span>09-11-25</span><a href="/" target="_blank">变天着花</a></li>
            <li><span>09-11-25</span><a href="/" target="_blank">阿辉饲了一只狗</a></li>
            <li><span>09-11-25</span><a href="/" target="_blank">真的假的</a></li>
            <li><span>09-11-25</span><a href="/" target="_blank">与你相爱到永远</a></li>
        </ul>
    </div>
</div>
</body>
</html>