39,118
社区成员
发帖
与我相关
我的任务
分享
...全文
请发表友善的回复…
发表回复
zhangsheng_1992 2017-04-11
- 打赏
- 举报
代码如下 请笑纳 只实现页面切换 不管内容 没找到图片 所有就被景色代替了 代码比较烂 jquery请自己引入 当然写源生也可以
效果图
<meta charset="utf-8" />
<style>
.box{
width:200px;
height: 300px;
overflow: hidden;
}
.frist{
width:200px;
height: 300px;
background: green;
}
.second{
width:200px;
height: 300px;
background: yellow;
}
.thrid{
width:200px;
height: 300px;
background: skyblue;
}
/*缩小 下一页*/
@keyframes less{
0%{
height:300px;
}
100%{
height:0px;
}
}
/*放大 上一页*/
@keyframes big{
0%{
height:0px;
}
100%{
height:300px;
}
}
.less{
animation-name: less;
animation-delay: 0s;
animation-timing-function: ease;
animation-duration: 0.8s;
animation-iteration-count: 1;
animation-direction: normal;
height: 0px;
}
.big{
animation-name: big;
animation-delay: 0s;
animation-timing-function: ease;
animation-duration: 0.8s;
animation-iteration-count: 1;
animation-direction: normal;
height: 300px;
}
</style>
<div class="box">
<div class="frist" id="page1">
<!-- 我是第一页-->
</div>
<div class="second" id="page2">
<!--我是第二页-->
</div>
<div class="thrid" id="page3">
<!--我是第三页-->
</div>
</div>
<button type="button" onclick="prePage()">上一页</button>
<button type="button" onclick="nextPage()">下一页</button>
<script src="jquery.min.js"></script>
<script>
var page = 1;//定义当前页
function nextPage(){
//边界控制
if(page >= 3){
return false;
}
$('#page'+page).removeClass('big');
$('#page'+page).addClass('less');
page++;
}
function prePage(){
//边界控制
if(page <= 1){
return false;
}
$('#page'+(page-1)).removeClass('less');
$('#page'+(page-1)).addClass('big');
page--;
}
</script>
效果图
天际的海浪 2017-04-11
- 打赏
- 举报
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
#box {
position: relative;
width: 200px;
height: 300px;
border: 1px solid #999;
overflow: hidden;
}
#box div {
width: 200px;
height: 300px;
}
#box div:first-child {
margin-top: 0px;
-webkit-transition: margin-top 400ms;
transition: margin-top 400ms;
}
</style>
</head>
<body>
<div id="box">
<div style="background-color: #f00;"></div>
<div style="background-color: #0f0;"></div>
<div style="background-color: #00f;"></div>
<div style="background-color: #f0f;"></div>
</div>
<input type="button" value="上一页" onclick="prev();" />
<input type="button" value="下一页" onclick="next();" />
<script type="text/javascript">
var box = document.getElementById("box");
var len = box.getElementsByTagName("div").length;
var div0 = box.getElementsByTagName("div")[0];
var page = 0;
function prev() {
if (page<=0) return;
page--;
div0.style.marginTop = -div0.offsetHeight*page+"px";
}
function next() {
if (page>=len-1) return;
page++;
div0.style.marginTop = -div0.offsetHeight*page+"px";
}
</script>
</body>
</html>
