首先看一下成品
演示页面
https://pai-daxing1.github.io/weixin/
项目结构：
HTML代码：
啦啦啦好像biu点什么
$(document).ready(function() {
my_section1.init();
$('#welcome').fullpage({
'verticalCentered': false,
'css3': true,
'sectionsColor': ['#6cbb52','#e89c38', '#40a3e1'],
'navigation': true,
'navigationPosition': 'right',
//'easing' : 'easeInOutBounce',
'afterRender' : function (index,anchorLink ) {
$(".iphone_img").addClass('fadeInTop');
},
'afterSlideLoad':function(index ) {
}
,
'afterLoad': function(anchorLink, index){
if( index == 2) {
$(".iphone_img").removeClass('fadeInTop');
}
if(index==3){
my_section1.init();
}
if(index==1){
my_section1.init();
}
if(index==2){
my_section2.init();
}
},
'onLeave': function(index, nextIndex, direction){
if( nextIndex == 1 ) {
$(".iphone_img").addClass('fadeInTop');
}
if(index==1){
my_section1.anim();
}
if(index==3){
my_section1.anim();
}
if(index==2){
my_section2.anim();
}
}
});
});
公众号：啦啦啦好像biu点什么全中国最大的微信公众平台！
iPhone版下载
Andriod版下载
那些事
关注发展，分享精彩
旅游景点文化黄金沙滩旅游攻略旅游网
那些事
掌控生活，旅游资讯，吃喝玩乐
旅游景点旅游攻略妈祖文化酒店风景莆田
微信号
|
wh1836360
关于我们
|
广告合作
|
免责声明
|
联系我们
Copyright © 1999- 那些事 来源:海拥CSDN
部分CSS代码：
body,html {
font-family: "微软雅黑";
font-size: 14px;
}
.fixed {
position: fixed
}
html {
width: 100%;
height: 100%;
}
.icon {
background: url(img/icon.png) no-repeat;
overflow: hidden;
}
.iphone_icon {
background: url(img/iphone.png) no-repeat;
}
.download_box .item_pc {
text-align: center!important;
border: 1px solid #fff;
}
.head {
top: 0px;
left: 0px;
width: 100%;
height: 57px;
padding-top: 10px;
border-bottom: 1px solid rgba(48, 48, 48,0.14);
overflow: hidden;
}
.head .head_content {
width: 74%;
max-width: 1000px;
height: 57px;
margin: 0 auto;
}
.head .login_box,
.head .login_box a {
color: #fff;
margin-right: 10px;
font-size: 105%;
}
.head .login_box {
margin-top: 2%;
margin-right: 3%;
}
.head .login_box span {
margin-right: 10px;
}
.head .logo {
width: 113px;
height: 46px;
background: url(img/logo.png) no-repeat;
}
.head .logo_blue {
}
.head .logo_green {
background-position: -11px -61px;
}
.bottom {
width: 100%;
bottom: 10px;
}
.bottom .bottom_content {
width: 74%;
max-width: 1045px;
margin: 0 auto;
}
.bottom a,
.bottom span {
float: left;
margin-right: 5px;
color: #000000;
font-size: 10px;
opacity: .4;
}
.bottom p {
font-size: 12px;
opacity: .4;
}
.my_section {
width: 74%;
max-width: 1000px;
margin: 0 auto;
padding-top: 64px;
position: relative;
transform:scale(1);
-webkit-transform:scale(1);
-moz-transform-origin:top left;
}
完整代码已打包上传
