以前一直想自己写几篇属于自己博客，但是由于工作原因以及一些生活的上的因素，导致一直都没能如愿，今天加班，正好事儿还没过来，真好留了时间给我写一篇博客。
在上一家公司的时候，主要从事的是移动端的开发，由于基于移动端有了相对来说很成熟的翻页框架，所以基本上很少会自己写一些翻页的效果，以及翻页的动画效果，之前的公司的模式更像是外包模式，很忙，也基本没有时间去自己研究那些框架的搭建和基层代码，换公司以后，公司有这个需求，要做一个这样的效果，然后自己就稍微研究了一下做法，想了一些逻辑来实现，如果有什么不对的，或者麻烦的，请各位大神帮忙指点。
话不多说了，开始贴代码吧：
<body>
<section class="wrapp">
<div class="viewpoint">
<a style="z-index:5;"><img src="imgs/xhc_logo.png"></a>
<a style="z-index:4;"><img id="downicon" src="imgs/down.png"></a>
<ul class="slidethumb"></ul>
<div class="containner">
<!--/*<img src="imgs/section0_80d2d2ee.jpg" >*/-->
<div class="data-1 page">
</div>
<div class="data-2 page">
<div class="xiebottom"></div>
<div class="data-2-animation">
<img class="data-2-floatimg" src="imgs/section1-phone1_e4888d2a.png">
<img class="data-2-floatimg floatimg2" src="imgs/section1-phone2_095728f7.png">
<img class="data-2-move1" src="imgs/section1-group1_62679686.png">
<img class="data-2-move2" src="imgs/section1-group3_23488e5d.png">
</div>
</div>
<div class="data-3 page">
<div class="xiebottom"></div>
</div>
</div>
</div>
</section>
</body> 我只是做了一个相应的demo，所以HTML写的比较随意，大神们请别见怪。
下面是一些css的样式
<style>
/*基本UI样式*/
*{margin:0;padding:0;}
.viewpoint{
min-width:320px;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
/*min-height:568px;*/
overflow:hidden;
}
.containner{
position:absolute;
top:0;
left:0;
width:100%;
height:500%;
}
.viewpoint a{
position:absolute;
top:7%;
left:10%;
width:150px;
height:40px;
z-index:1;
}
.viewpoint a img{
width:100%;
height:100%;
}
.viewpoint a:nth-child(2){
max-width:40px;
min-width:15px;
top:94%;
left:48%;
width:2%;
height:auto;
}
.data-1{
width:100%;
height:20%;
position:absolute;
overflow:hidden;
background-image:url("../imgs/section0_80d2d2ee.jpg");
background-size:100% auto;
background-repeat:no-repeat;
background-color:#2996D7;
background-position:50% 50%;
}
.data-2{
width:100%;
height:20%;
top:20%;
position:absolute;
overflow:hidden;
background:#3d475a;}
.data-2 .xiebottom{
position:absolute;
height:100%;
width:100%;
top:100%;
left:0;
transform-origin:left top;
-webkit-transform-origin:left top;
transform:skewY(-7deg);
-webkit-transform:skewY(-7deg);
background:#ff5d43;
}
.data-2 .data-2-animation{
position:absolute;
width:25%;
max-width:160px;
left:10%;
top:20%;
}
.data-2 .data-2-animation .data-2-floatimg{
position:absolute;
width:100%;
height:auto;
}
.floatimg2{
filter:alpha(opacity=0); /*IE滤镜，透明度50%*/
-moz-opacity:0; /*Firefox私有，透明度50%*/
opacity:0;/*其他，透明度50%*/
}
.data-3{top:40%;width:100%;
height:20%;
position:absolute;
overflow:hidden;
background-color:#ff5d43}
.data-3 .xiebottom{
position:absolute;
height:100%;
width:100%;
top:100%;
left:0;
transform-origin:right top;
-webkit-transform-origin:right top;
transform:skewY(4deg);
-webkit-transform:skewY(4deg);
background:#28d5b9;
}
.slidethumb{
position:absolute;
list-style:none;
max-width:10px;
max-height:200px;
width:1%;
height:30%;
top:35%;
left:95%;
z-index:3;
}
.slidethumb li{
list-style:none;
max-height:200px;
width:100%;
margin-bottom:10px;
text-align:center;
transition:all .5s;
}
.slidethumb li div{
width:2px;
height:100%;
background-color:#FFF;
margin:0 auto;
}
.slidethumb li:hover{
cursor:pointer;
box-shadow:inset 0 0 8px #FFFFFF;
}
.data-2-move1{
position:absolute;
max-width:120px;
width:75%;
height:auto;
left:13.3%;
top:0%;
filter:alpha(opacity=0); /*IE滤镜，透明度50%*/
-moz-opacity:0; /*Firefox私有，透明度50%*/
opacity:0;/*其他，透明度50%*/
}
.data-2-move2{
position:absolute;
max-width:36px;
width:25%;
height:auto;
left:3%;
top:30.5%;
filter:alpha(opacity=0); /*IE滤镜，透明度50%*/
-moz-opacity:0; /*Firefox私有，透明度50%*/
opacity:0;/*其他，透明度50%*/
}
/*添加动画样式*/
.adddata-1-phone{
animation:data-1-floatimg-floatimg2 3s 1.5s forwards;
-webkit-animation:data-1-floatimg-floatimg2 3s 1.5s forwards;
}
.viewpoint a:nth-child(2){
animation:fadeinout 1s infinite;
-webkit-animation:fadeinout 1s infinite;
}
.adddata-2-move1{
animation:data-2-move1-slide 2s forwards;
-webkit-animation:data-2-move1-slide 2s forwards;
}
.adddata-2-move2{
animation:data-2-move2-slide 2s forwards;
-webkit-animation:data-2-move2-slide 2s forwards;
}
/*动画效果*/
@keyframes data-2-move2-slide{
from{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/
-moz-opacity:0; /*Firefox私有，透明度50%*/
opacity:0;/*其他，透明度50%*/
left:3%;
transform:rotate(0);}
to{filter:alpha(opacity=100); /*IE滤镜，透明度50%*/
-moz-opacity:1; /*Firefox私有，透明度50%*/
opacity:1;/*其他，透明度50%*/
left:39.5%;
transform:rotate(720deg);
}
}
@-webkit-keyframes data-2-move2-slide{
from{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/
-moz-opacity:0; /*Firefox私有，透明度50%*/
opacity:0;/*其他，透明度50%*/
left:3%;
transform:rotate(0);}
to{filter:alpha(opacity=100); /*IE滤镜，透明度50%*/
-moz-opacity:1; /*Firefox私有，透明度50%*/
opacity:1;/*其他，透明度50%*/
left:39.5%;
transform:rotate(720deg);
}
}
@keyframes data-2-move1-slide{
from{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/
-moz-opacity:0; /*Firefox私有，透明度50%*/
opacity:0;/*其他，透明度50%*/
top:0;}
to{filter:alpha(opacity=100); /*IE滤镜，透明度50%*/
-moz-opacity:1; /*Firefox私有，透明度50%*/
opacity:1;/*其他，透明度50%*/
top:18%;
}
}
@-webkit-keyframes data-2-move1-slide{
from{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/
-moz-opacity:0; /*Firefox私有，透明度50%*/
opacity:0;/*其他，透明度50%*/
top:0;}
to{filter:alpha(opacity=100); /*IE滤镜，透明度50%*/
-moz-opacity:1; /*Firefox私有，透明度50%*/
opacity:1;/*其他，透明度50%*/
top:18%;
}
}
@keyframes data-1-floatimg-floatimg2{
from{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/
-moz-opacity:0; /*Firefox私有，透明度50%*/
opacity:0;/*其他，透明度50%*/
left:0;}
to{filter:alpha(opacity=100); /*IE滤镜，透明度50%*/
-moz-opacity:1; /*Firefox私有，透明度50%*/
opacity:1;/*其他，透明度50%*/
left:150%;}
}
@-webkit-keyframes data-1-floatimg-floatimg2{
from{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/
-moz-opacity:0; /*Firefox私有，透明度50%*/
opacity:0;/*其他，透明度50%*/
left:0;}
to{filter:alpha(opacity=100); /*IE滤镜，透明度50%*/
-moz-opacity:1; /*Firefox私有，透明度50%*/
opacity:1;/*其他，透明度50%*/
left:150%;}
}
@keyframes fadeinout{
0%{filter:alpha(opacity=1); /*IE滤镜，透明度0%*/
-moz-opacity:1; /*Firefox私有，透明度0%*/
opacity:1;/*其他，透明度0%*/
top:94%;}
100%{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/
-moz-opacity:0; /*Firefox私有，透明度50%*/
opacity:0;/*其他，透明度50%*/
top:96%;}
}
@-webkit-keyframes fadeinout{
0%{filter:alpha(opacity=1); /*IE滤镜，透明度0%*/
-moz-opacity:1; /*Firefox私有，透明度0%*/
opacity:1;/*其他，透明度0%*/
top:94%;}
100%{filter:alpha(opacity=0); /*IE滤镜，透明度50%*/
-moz-opacity:0; /*Firefox私有，透明度50%*/
opacity:0;/*其他，透明度50%*/
top:96%;}
}
</style> 这里的css我没有使用less或者sass进行预处理，只是随手写了一下样式，希望大神可以给一些样式的规范意见供小弟去参考。
下面是jq了，首先得引入相应的jq的min包，然后可以开始写自己的代码了
<script>
//滚动鼠标的时候滑动界面，并执行动画
$(function(){
var currentpage=0;//当前的页面index
var forepage;//获取移动之前的页面
var slidePage;//获取第一页
var height;//得到第一页的高度
var AllPage;//获取滑动的整体界面
var allheight;//获取滑动界面的整个高度
var top;//获取滑动整体界面的top属性值
var pagecount;//获取滑动的页数
var data2animationheight;
var htmlholder="";
//数据初始化
var init=function(){
slidePage=$(".data-1");
height=slidePage.height();
AllPage=$(".containner");
allheight=AllPage.height();
top=AllPage.css("top");
pagecount=AllPage.find(".page").length;
data2animationheight=$(".data-2-floatimg").height();
$(".data-2-animation").height(data2animationheight);
}
//生成右边的滑动栏
init();
for(var i=0;i<pagecount;i++){
htmlholder+="<li><div></div></li>";
}
$(".slidethumb").append(htmlholder);
$(".slidethumb").find("li").css({"height":($(".slidethumb").height()/(pagecount+1))});
//点击滑动栏会移动
$(".slidethumb").find("li").click(function(e){
//console.log($(this).index());
//$(this).find("div").css({"width":4});
for(var i=0;i<pagecount;i++){
if(i==$(this).index()){
$(this).find("div").css({"width":4});
}
else{
$(".slidethumb li:eq("+i+")").find("div").css({"width":2});
}
}
//console.log($(!this).index());
forepage=currentpage;
currentpage=$(this).index();
if(forepage!=currentpage){
animation(currentpage);
setTimeout(function(){removeanimation(forepage);},1000);
}
AllPage.animate({'top':'-'+currentpage*height},1000);
})
//滑动效果
var slide=function(delta){
init();
if(currentpage==(pagecount-1)){
$("#downicon").css({"display":"none"});
}
if(currentpage!=(pagecount-1)){
$("#downicon").css({"display":"block"});
}
//alert(pagecount);
if(!AllPage.is(":animated")){
if(delta<0&¤tpage<pagecount-1){
AllPage.animate({'top':'-='+height},1000);
//setTimeout("",1000);
forepage= currentpage;
currentpage++;
setTimeout(function(){removeanimation(forepage);},1000);
animation(currentpage);
console.log(currentpage);
}else if(delta>0&¤tpage>0){
AllPage.animate({'top':'+='+height},1000);
forepage=currentpage;
currentpage--;
setTimeout(function(){removeanimation(forepage);},1000);
animation(currentpage);
console.log(currentpage);
}
}
}
//动画效果
var animation=function(currentpage){
for(var i=0;i<pagecount;i++){
if(i==currentpage){
$(".slidethumb li:eq("+i+")").find("div").css({"width":4});
}
else{
$(".slidethumb li:eq("+i+")").find("div").css({"width":2});
}
}
switch(currentpage){
case 1:
$(".floatimg2").addClass("adddata-1-phone");
$(".data-2-move1").addClass("adddata-2-move1");
$(".data-2-move2").addClass("adddata-2-move2");
break;
case 2:
break;
}
}
//移除动画效果
function removeanimation(currentpage){
switch(currentpage){
case 1:
$(".floatimg2").removeClass("adddata-1-phone");
$(".data-2-move1").removeClass("adddata-2-move1");
$(".data-2-move2").removeClass("adddata-2-move2");
break;
case 2:
break;
}
}
//滚轮事件
var wheel=function(event){
var delta = 0; //滚动数值
//ie
if(!event)
event = window.event;
//ie+opera
else if(event.wheelDelta)
delta=event.wheelDelta/120;
//firefox
else if(event.detail)
delta=-event.detail/3;
if(delta)
handle(delta);
}
var handle=function(delta){
slide(delta);
}
//判断是否支持触摸事件
var touchcheck=function(){
try{
document.createEvent("TouchEvent");
document.addEventListener('touchstart', touchstartfunc, false);
document.addEventListener('touchmove', touchMovefunc, false);
document.addEventListener('touchend', touchEndfunc, false);
}
catch(e){
//监听滚轮事件
//ff
if(window.addEventListener){
window.addEventListener("DOMMouseScroll",wheel,false);
}
//ie
window.onmousewheel=document.onmousewheel=wheel;
}
}
//手机上的触摸事件
var startX=0;
var startY=0;
function touchstartfunc(ev){
var touch=ev.touches[0];
startX=Number(touch.pageX);
startY=Number(touch.pageY);
console.log(startX+" "+startY);
}
function touchMovefunc(ev){
ev.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
//alert("Move");
var touch = ev.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
if(Math.abs(x-startX)<5&&(y-startY)>5){
slide(1);
}
else if(Math.abs(x-startX)<5&&(y-startY)<-5){
slide(-1);
}
}
//监听滚轮事件
//ff
//if(window.addEventListener){
// window.addEventListener("DOMMouseScroll",wheel,false);
// }
// //ie
// window.onmousewheel=document.onmousewheel=wheel;
//监听屏幕大小的改变
window.onresize=function(){
if(currentpage!=0){
if(!AllPage.is(":animated")){
AllPage.animate({'top':0},1000);
//alert(currentpage)
removeanimation(currentpage);
animation(0);
currentpage=0;
init();
}
}
else{
init();
}
}
$("#downicon").click(function(e) {
slide(-1);
});
animation(currentpage);
touchcheck();
});
</script>
这里的代码包含的是手机端和PC端的效果，有判断手机端还是PC端的，如果是手机端的话会有触发事件，如果是PC端的话才会有鼠标的滚轮事件，代码还监听了屏幕大小改变的时候触发的事件，在变屏幕的大小变化的时候，会将数据进行初始化，避免了因为屏幕大小发生改变而使得翻页的时候翻动的距离还是之前界面的大小而产生的bug。
这是小弟第一次写博客，有写的不好的或者不对的，请各位大神指出，我会及时纠正的。谢谢您观看此博客。