jquery横向滑屏滚动-蒲公英云

jquery横向滑屏滚动

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