以前一直想自己写几篇属于自己博客,但是由于工作原因以及一些生活的上的因素,导致一直都没能如愿,今天加班,正好事儿还没过来,真好留了时间给我写一篇博客。
在上一家公司的时候,主要从事的是移动端的开发,由于基于移动端有了相对来说很成熟的翻页框架,所以基本上很少会自己写一些翻页的效果,以及翻页的动画效果,之前的公司的模式更像是外包模式,很忙,也基本没有时间去自己研究那些框架的搭建和基层代码,换公司以后,公司有这个需求,要做一个这样的效果,然后自己就稍微研究了一下做法,想了一些逻辑来实现,如果有什么不对的,或者麻烦的,请各位大神帮忙指点。
话不多说了,开始贴代码吧:
<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;
bac