jquery横向滑屏滚动

柔情只为你懂 2022-08-13 04:59 166阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>横向滚动</title>
    <style type="text/css">
    *{
     padding:0;
     margin:0;
    }
    ul li{
     list-style:none;
    }
    html{
     overflow:hidden;/*解决在IE6中有横向滚动条*/
    }
    body{
     overflow:hidden;/*解决横向滚动条问题*/
    }
    /*.outMain{
     overflow-x:hidden;
     position:relative;
    }*/
    .left{
     text-align:center;
     position:absolute;
     background:#CCC;
     width:100%;
     height:100%;
     top:0;
     left:0;
     right:0;
     bottom:0;
     z-index:1;
    }
    .right{
     text-align:center;
     position:absolute;
     background:#FC9;
     width:100%;
     height:100%;
     top:0;
     left:0;
     right:0;
     bottom:0;
    }
    a.clickleft{
     display:block;
     text-decoration:none;
     background:#099;
     position:absolute;
     z-index:2;
     color:#FFF;
     top:300px;
     left:0;
    }
    a.clickright{
     display:block;
     text-decoration:none;
     background:#09F;
     position:absolute;
     z-index:5;
     color:#FFF;
     top:300px;
     right:0;
    }
    </style>
    <script type="text/javascript" src="js/1.3.2.js"></script>
    <script type="text/javascript">
    $(function(){
        //$('.right').hide();
        $('.clickright').hide();
        var w=screen.width;
        var h=screen.height;
        var left=$(".left");
        var right=$(".right");
        $('.left,.right').css("height",h);/*解决在IE6下高度不能铺满全屏*/
         
        $('.clickleft').click(function(){
            //alert(width);
            left.animate({marginLeft:+w},1000);
            left.css("z-index","-5");
            right.css({"z-index":"-8","margin-left":"0"});
            //left.hide();
            //$('.right').show();
            //left.appendTo(right);
            $(this).hide();
            $('.clickright').show();
        });
         
        $('.clickright').click(function(){
            //alert(width);
            left.css({"z-index":"-10","margin-left":"0"});
            right.animate({marginLeft:-w},1000);
            $('.clickleft').show();
            $(this).hide();
        });
    });
    </script>
    </head>
     
    <body>
    <div class="outMain">
         <div class="left">left</div>
         <div class="right">right</div>
    </div>
    <a href="#" class="clickleft">left</a>
    <a href="#" class="clickright">right</a>
    </body>
     
    </html>