您的位置：首页 > Web前端 > HTML

html实现全屏分页

2016-07-07 20:02 246 查看

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

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属性。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航