这是一个模板,http://www.1905.com/html5/2018moviereport/?from=singlemessage&isappinstalled=0
朋友想做出这样的一样效果,所以我就自己试着写了一下,只是实现了其中的一部分效果,好了话不多说直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Title</title>
<link rel="stylesheet" href="css/demo.css">
<script src="js/app.js"></script>
</head>
<body>
<div class="title">下一页</div>
<ul id="top">
<li class="select">
<div>
<img src="img/page1.png" alt="" class="first">
<img src="img/page2.png" alt="">
<img src="img/page3.png" alt="">
</div>
</li>
<li class="">
<div>
<img src="img/page4.png" alt="" class="first">
<img src="img/page5.png" alt="">
<img src="img/page6.png" alt="">
<img src="img/page7.png" alt="">
</div>
</li>
<li class="">
<div>
<img src="img/page8.png" alt="" class="first">
<img src="img/page9.png" alt="">
<img src="img/page10.png" alt="">
<img src="img/page11.png" alt="">
<img src="img/page12.png" alt="">
</div>
</li>
<li class="">
<div>
<img src="img/page13.png" alt="" class="first">
<img src="img/page14.png" alt="">
<img src="img/page15.png" alt="">
<img src="img/page16.png" alt="">
</div>
</li>
</ul>
<ul id="footer">
<li class="red">第一</li>
<li>第二</li>
<li>第三</li>
<li>第四</li>
</ul>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/demo.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
html{
width: 100%;
height: 100%;
}
body{
/*overflow: hidden;*/
width: 100%;
height: 100%;
font-size: 0.28rem;
}
.title{
width: 15px;
text-align: center;
padding: 20px 6px;
position: absolute;
right: 0;
bottom: 30%;
border: 1px solid black;
border-right: none;
z-index: 999;
cursor: pointer;
}
ul li {
list-style: none;
text-align: center;
/*float: left;*/
}
#top{
width: 100%;
height: 100%;
position: relative;
}
#top li{
width: 100%;
height: 100%;
position: absolute;
top: -800px;
left: 0;
}
#top li.select{
animation: myTab 1s both;
}
#top li.selected{
animation: myTabnone 1s both;
}
#top li>div{
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
#top li>div img{
width:80%;
height: 80%;
margin: 20px auto;
position: absolute;
top: -700px;
left:40px;
}
#top li>div img.first{
top: 0;
}
#top li>div img.one{
animation: myfirst 1s both;
z-index: 99;
}
/*图片切换*/
@keyframes myfirst {
0%{
top: -700px;
}
100%{
top: 0;
}
}
/*内容切换
出现*/
@keyframes myTab {
0%{
top:-800px
}
100%{
top: 0;
}
}
/*消失*/
@keyframes myTabnone{
0%{
top: 0;
}
100%{
top: 1400px;
}
}
#footer{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
}
#footer li{
width: 25%;
padding: 20px 0;
float: left;
background: #ff923d;
}
#footer li.red{
background: #0090CE;
}
$(function () {
var y0=0;
var y1=0;
var num = 0;
var index = 0;
function move (index){
num=0;
$("#footer li").removeClass("red");
$("#footer li:eq("+index+")").addClass("red");
$("#top li").addClass("select selected");
$("#top li>div img").addClass("first").removeClass("one");
$("#top li:eq(" + index + ")").addClass("select").removeClass("selected");
$("#top li:eq(" + index + ")>div img").removeClass("one");
}
$("#footer li").on("click", function () {
index = $(this).index();
move(index);
});
$(".title").on("click", function () {
var len = $("#top li:eq(" + index + ")>div img").length-1;
if (num < len) {
num++;
$("#top li:eq(" + index + ")>div img:eq("+num+")").addClass("one");
}else{
if(index>$("#footer li").length-1){
index=-1;
}
index++;
move(index);
}
})
})