jquery横向滑屏滚动

最新推荐文章于 2022-01-17 13:59:53 发布

夏末_阳光依然耀眼

最新推荐文章于 2022-01-17 13:59:53 发布

阅读量714

点赞数

分类专栏： div+css 文章标签： css div javascript jquery

本文链接：https://blog.csdn.net/boyit0/article/details/40047145

版权

div+css 专栏收录该内容

89 篇文章 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>

夏末_阳光依然耀眼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery横向滑屏滚动

横向滚动*{ padding:0; margin:0;}ul li{ list-style:none;}html{ overflow:hidden;/*解决在IE6中有横向滚动条*/}body{ overflow:hidden;/*解决横向滚动条问题*/}/*.outMain{ overflow-x:hidden; position:relative;}*/.
复制链接

扫一扫