Skip to content

Commit

Permalink
完成
Browse files Browse the repository at this point in the history
  • Loading branch information
@darkcityX
darkcityX committed May 8, 2019
1 parent 5ddd48c commit 06f44cc
Show file tree
Hide file tree
Showing 6 changed files with 110 additions and 42 deletions.
4 changes: 3 additions & 1 deletion css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,9 @@
background: #f3f3f3;
}
.item-container .pagesContainer .page2 .banner-container {
height: 100vh;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
}
.item-container .pagesContainer .page2 .banner-container .banner-view {
position: relative;
Expand Down
4 changes: 3 additions & 1 deletion css/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,9 @@
.page2{
background: #f3f3f3;
.banner-container{
height: 100vh;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.2);
.banner-view{
position: relative;
.bannerPage{
Expand Down
89 changes: 62 additions & 27 deletions js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,12 @@ function INDEX() {
el: '.swiper-pagination'
},
on: {
init: function(){
swiperAnimateCache(this); //隐藏动画元素
swiperAnimate(this); //初始化完成开始动画
},
slideChangeTransitionStart: function(){
let i = this.activeIndex; // 索引下标
console.log( i );
let b; // 第三方变量值
switch (i){
case 0:
Expand All @@ -39,24 +42,15 @@ function INDEX() {
default:
break;
}
// console.log( b == 1 );

i == 1 && $('#menu').prev().animate({
'opactiy': '0'
},200).next().animate({
'top': '-4.2rem',
'opacity': '1'
},1000).css({'background':'rgba(255,255,255,1)'});
opacity: 0
},1000).next().animate({
'top': '-4.2rem',
'opacity': '1'
},1000);

// 导航定位active
// b == 1 && function(){
// $("#menu").children("li").removeClass('active').eq(0).addClass('active');
// }();
// b == 2 && function(){
// $("#menu").children("li").removeClass('active').eq(1).addClass('active');
// }();
// b == 3 && function(){
// $("#menu").children("li").removeClass('active').eq(2).addClass('active');
// }();
switch (b){
case 1:
$("#menu").children("li").removeClass('active').eq(0).addClass('active');
Expand All @@ -68,30 +62,71 @@ function INDEX() {
$("#menu").children("li").removeClass('active').eq(2).addClass('active');
break;
}


},
slideChangeTransitionEnd: function(){
let i = this.activeIndex; // 索引下标
console.log("触发 end");
0 == i && $('#menu').css({'background':'rgba(255,255,255,0.8)'}).animate({
'top': '0',
'opacity': '0.8'
swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
let i = this.activeIndex; // 索引下标
0 == i && $('#menu').animate({
top: 0,
opacity: 0.8
},1000).prev().animate({
'opactiy': '1'
},200);
//.css({'top':'0','background':'rgba(255,255,255,0.8)'});
opacity: 1
},1000);
},
},
});

// 菜单导航单击跳转
$("#menu").children("li").each(function(i){
$(this).on('click',function(e){
e.preventDefault();
switch (i){
case 0:
$('#menu').animate({
top: 0,
opacity: 0.8
},1000).prev().animate({
opacity: 1
},1000);
$(this).addClass('active').siblings().removeClass('active');
mySwiper.slideTo(0, 1000, false);
break;
case 1:
$('#menu').prev().animate({
opacity: 0
},1000).next().animate({
'top': '-4.2rem',
'opacity': '1'
},1000);
$(this).addClass('active').siblings().removeClass('active');
mySwiper.slideTo(2, 1000, false);
break;
case 2:
$('#menu').prev().animate({
opacity: 0
},1000).next().animate({
'top': '-4.2rem',
'opacity': '1'
},1000);
$(this).addClass('active').siblings().removeClass('active');
mySwiper.slideTo(6, 1000, false);
break;
default:
break;
}
});
});

}

function initEvent(){

// swiper页面2 banner控制器
let myBanner = new Swiper('.banner-container',{
loop : true,
effect : 'cube',
pagination: {

},
});
}
Expand Down
46 changes: 33 additions & 13 deletions template/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,19 @@
<title>swiper页面布局演示</title>
<!-- swiper -->
<link rel="stylesheet" href="./../third/swiper4/swiper.css">
<link rel="stylesheet" href="./../third/swiper_animate/animate.min.css">
<link rel="stylesheet" href="./../css/base.css">
<link rel="stylesheet" href="./../css/index.css">
<script src="./../third/flexible/flexible.js"></script>
<script src="./../third/swiper4/swiper.js"></script>
<script src="./../third/swiper_animate/swiper.animate.min.js"></script>
<script src="./../third/jquery/jquery.min.js"></script>
</head>
<body>

<div class="item-container swiper-container">
<div class='header'>
<div class="header-top">
<div id='header-top' class="header-top">
Swiper官网示例demo
</div>
<ul id="menu" class="menu">
Expand Down Expand Up @@ -72,22 +74,40 @@ <h2>我们是谁？</h2>
</div>
<!-- 四、四屏 -->
<div class="page page4 swiper-slide">
<a href="#">
<img src="./../images/4.png" alt="">
</a>
</div>
<a href="#">
<img
class='ani'
swiper-animate-effect="rotateIn"
swiper-animate-duration="0.5s"
swiper-animate-delay="0.3s"
src="./../images/4.png"
alt="">
</a>
</div>
<!-- 五、五屏 -->
<div class="page page5 swiper-slide">
<a href="#">
<img src="./../images/5.png" alt="">
</a>
</div>
<a href="#">
<img
class='ani'
swiper-animate-effect="rollIn"
swiper-animate-duration="0.5s"
swiper-animate-delay="0.3s"
src="./../images/5.png"
alt="">
</a>
</div>
<!-- 六、六屏 -->
<div class="page page6 swiper-slide">
<a href="#">
<img src="./../images/6.png" alt="">
</a>
</div>
<a href="#">
<img
class='ani'
swiper-animate-effect="zoomIn"
swiper-animate-duration="0.5s"
swiper-animate-delay="0.3s"
src="./../images/6.png"
alt="">
</a>
</div>
<!-- 七、七屏 -->
<div id="page7" class="page page7 swiper-slide">
</div>
Expand Down
6 changes: 6 additions & 0 deletions third/swiper_animate/animate.min.css
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions third/swiper_animate/swiper.animate.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 06f44cc

Please sign in to comment.