zoukankan      html  css  js  c++  java
  • js拖拽翻页效果

    <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;
            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{
            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;
            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ɬ){
                    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ុ){
                                            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ᢃ){
                                            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ុ){
                    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ᢃ){
                    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ុ){
                    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ᢃ){
                    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-4-9 12:35</span><a href=http://www.67g.cn>东方之珠</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>啊!停不住的爱人</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>宁静温泉</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>你的样子</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>恋曲1980</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>恋曲1990</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>恋曲2000</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>亚细亚的孤儿</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>伴侣</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>童年</a></li>
            </ul>
    </div>
    <div>
            <ul>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>爱的箴言</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>爱人同志</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>思念</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>母亲</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>是否</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>牧童</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>青春舞曲</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>蒲公英</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>未来的主人翁</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>如今才是唯一</a></li>
            </ul>
    </div>

    <div>
            <ul>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>暗恋</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>弹唱词</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>飞车</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>东方之珠</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>滚滚红尘</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>光阴的故事</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.oern.cn>之乎者也</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>现象七十二变</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>乡愁四韵</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>穿过你的黑发我的手</a></li>
            </ul>
    </div>
    <div>
            <ul>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>大兵歌</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>歌</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>黄色面孔</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>台北红玫瑰</a></li>
                    <li><span-4-9 12:35</span><a href=http://www.67g.cn>我所不能了解的事</a></li>
            </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    蒲公英
    大神-YY
    iOS开发精选知识点讲解 - 视频等 iOSStrongDemo是由@李刚维护,总结一些iOS开发精选知识点。每一个知识点都有相应的测试代码,非常适合iOS初学者。
    iOS开发UI篇—懒加载
    iOS开发UI篇—UITableviewcell的性能优化和缓存机制
    iOS开发UI篇—UITableview控件基本使用
    iOS开发UI篇—UITableview控件简单介绍
    iOS — Autolayout之Masonry解读
    iOS开发UI篇—多控制器和导航控制器简单介绍
    iOS开发网络篇—数据缓存
  • 原文地址:https://www.cnblogs.com/lonelyofsoul/p/1632759.html
Copyright © 2011-2022 走看看