html实现全屏分页

最新推荐文章于 2024-08-16 15:07:38 发布

yy211zhu

最新推荐文章于 2024-08-16 15:07:38 发布

阅读量1.9k

点赞数 1

分类专栏： web Jquery 文章标签： html

本文链接：https://blog.csdn.net/yy211zhu/article/details/51853914

版权

web 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Jquery

13 篇文章 0 订阅

订阅专栏

做这个小功能的原因是因为之前做了个小的移动端项目，是一个全屏分页效果，自己在网上也找了些解决方案，下面是个小例子，供大家参考。

1.HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="css/test.css"/>
    <script src="js/jquery-2.2.3.js"></script>
    <script src="js/test.js"></script>
</head>
<body>
    <div id="wrap" class="">
        <ul class="ulcontent ">
            <li id="section1">
                页面1
            </li>
            <li id="section2">
                页面2
            </li>
            <li id="section3">
                页面3
            </li>
        </ul>
    </div>
<div class="button">
    <button>点击切换页面</button>
</div>

</body>
</html>

2.css代码


*{padding:0px; margin:0px;}
ul li{list-style: none;}
.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
.clearfix{zoom:1;}
body{}
.button{position:absolute; bottom: 0px;}
#wrap{overflow: hidden;height:100%; width: 100%; position: absolute;}
.ulcontent{position: relative; }
.ulcontent li{
    float:left;
    position: relative;
    overflow: hidden;
;}
#section1{
    background:#093;
}
#section2{
    background:#eee;
}
#section2{
    background: yellow;
}

3.js代码

/**
 * Created by leo.zhu on 2016/7/6.
 */
$(document).ready(function(){
//获取html文档的高度与宽度
        var H=$(document).height();
        var W=$(document).width();

        //找到li标签的父容器
        var getContainer=$(".ulcontent");
        var liItem=getContainer.find("li");
        //给父容器设置三个li的宽度
        getContainer.css({
                width:(W *3) +"px",
                height:H + "px"
        })
       //用each方法给每个li设置宽度高度
        $.each(liItem,function(index){
                liItem.eq(index).css({
                        width:W +"px",
                        height:H +"px"
                })
        })
/*点击切换页面*/
        $("button").click(function(){
                getContainer.css({
                        'transition-timing-function': 'linear',
                        'transition-duration': '5000ms',
                        'transform': 'translate3d(-' + (W * 2) + 'px,100px,50px)' 
                });
        })
})

总结：
为了让浏览器页面没有滚动条，需要给#wrap添加overflow:hidden属性。关于获取屏幕的高度宽度可使用 $(window).height(),这里我使用了$ (document).height().也可以直接获取$(“#wrap”).height()来给li元素设置高度，或者宽度。但是必须给#wrap加上position：absolute属性。