swiper制作的场景应用资源-CSDN文库

共23个文件

png：12个

jpg：4个

css：2个

swiper

场景应用

1星需积分: 46 12 浏览量 2015-05-20 08:46:37 上传评论收藏 1.45MB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

tiger.rar （23个子文件）

tiger

css

animate.min.css 60KB

swiper.min.css 14KB

upload

002.png 16KB

bonus_01.png 9KB

006.png 358KB

008.png 119KB

003.png 20KB

bonus_02.jpg 24KB

001.jpg 65KB

002.jpg 301KB

010.png 5KB

bg.jpg 247KB

001.png 15KB

009.png 35KB

004.png 98KB

007.png 5KB

005.png 73KB

images

arrow.png 2KB

index.html 8KB

swiper.min.js 60KB

maps

swiper.jquery.min.js.map 190KB

swiper.min.js.map 231KB

swiper.animate.min.js 2KB

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>打虎新形态</title> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> <link rel="stylesheet" href="css/swiper.min.css"> <link rel="stylesheet" href="css/animate.min.css"> <script src="js/swiper.min.js"></script> <script src="js/swiper.animate.min.js"></script>  <style> *{ margin:0; padding:0; } html,body{ height:100%; } body{ font-family:"microsoft yahei"; } .swiper-container { /* width: 320px; height: 480px;*/ width: 100%; height: 100%; background:#000; } .swiper-slide{ width:100%; height:100%; background:url(upload/bg.jpg) no-repeat left top; background-size:100% 100%; } img{ display:block; } .swiper-pagination-bullet { width: 6px; height: 6px; background: #fff; opacity: .4; } .swiper-pagination-bullet-active { opacity: 1; } @-webkit-keyframes start { 0%,30% {opacity: 0;-webkit-transform: translate(0,10px);} 60% {opacity: 1;-webkit-transform: translate(0,0);} 100% {opacity: 0;-webkit-transform: translate(0,-8px);} } @-moz-keyframes start { 0%,30% {opacity: 0;-moz-transform: translate(0,10px);} 60% {opacity: 1;-moz-transform: translate(0,0);} 100% {opacity: 0;-moz-transform: translate(0,-8px);} } @keyframes start { 0%,30% {opacity: 0;transform: translate(0,10px);} 60% {opacity: 1;transform: translate(0,0);} 100% {opacity: 0;transform: translate(0,-8px);} } .ani{ position:absolute; } .txt{ position:absolute; } #array{ position:absolute;z-index:999;-webkit-animation: start 1.5s infinite ease-in-out; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper">  <section class="swiper-slide swiper-slide1"> <img src="upload/bonus_01.png" class="ani resize" style="width:320px;height:43px;left:0px;top:30px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s" > <img src="upload/bonus_02.jpg" class="ani resize" style="width:320px;height:27px;left:0px;top:75px;z-index:3;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" > <img src="upload/001.png" class="ani resize" style="width:320px;height:188px;left:0;top:140px;z-index:2;" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2s" > <img src="upload/002.png" class="ani resize" style="width:320px;height:188px;left:0px;top:140px;z-index:1;" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.5s" swiper-animate-delay="2.5s" > <img src="upload/003.png" class="ani resize" style="width:320px;height:112px;left:0px;top:320px;z-index:1;" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="4s" > </section>  <section class="swiper-slide swiper-slide2"> <img src="upload/004.png" class="ani resize" style="width:320px;height:64px;left:0px;top:10px;z-index:5; " swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0s" > <img src="upload/005.png" class="ani resize" style="width:320px;height:42px;left:0px;top:100px;z-index:4;" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" > <img src="upload/006.png" class="ani resize" style="width:320px;height:264px;left:0px;top:160px;z-index:3;" swiper-animate-effect="zoomInDown" swiper-animate-duration="0.5s" swiper-animate-delay="1s" > </section>  <section class="swiper-slide swiper-slide3"> <img src="upload/007.png" class="ani resize" style="width:320px;height:66px;left:0px;top:30px;z-index:5; " swiper-animate-effect="bounce" swiper-animate-duration="0.5s" swiper-animate-delay="0s" > <img src="upload/008.png" class="ani resize" style="width:320px;height:192px;left:0px;top:220px;z-index:4;" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="1s" > <img src="upload/009.png" class="ani resize" style="width:320px;height:77px;left:0px;top:110px;z-index:3;" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" > <img src="upload/010.png" class="ani resize" style="width:320px;height:192px;left:0px;top:220px;z-index:2;" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s" > </section>  <section class="swiper-slide swiper-slide4"> <img src="upload/001.jpg" class="ani resize" style="width:320px;height:46px;left:0;top:20px;z-index:2;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s" > <img src="upload/002.jpg" class="ani resize" style="width:320px;height:327px;left:0px;top:100px;z-index:1;" swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" > </section> </div> <img src="images/arrow.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize"> <div class="swiper-pagination"></div> </div> <script> scaleW=window.innerWidth/320; scaleH=window.innerHeight/480; var resizes = document.querySelectorAll('.resize'); for (var j=0; j<resizes.length; j++) { resizes[j].style.width=parseInt(resizes[j].style.width)*scaleW+'px'; resizes[j].style.height=parseInt(resizes[j].style.height)*scaleH+'px'; resizes[j].style.top=parseInt(resizes[j].style.top)*scaleH+'px'; resizes[j].style.left=parseInt(resizes[j].style.left)*scaleW+'px'; } var mySwiper = new Swiper ('.swiper-container', { direction : 'vertical', pagination: '.swiper-pagination', //virtualTranslate : true, mousewheelControl : true, onInit: function(swiper){ swiperAnimateCache(swiper); swiperAnimate(swiper); }, onSlideChangeEnd: function(swiper){ swiperAnimate(swiper); }, onTransitionEnd: function(swiper){ swiperAnimate(swiper); }, watchSlidesProgress: true, onProgress: function(swiper){ for (var i = 0; i < swiper.slides.length; i++){ var slide = swiper.slides[i]; var progress = slide.progress; var translate = progress*swiper.height/4; scale = 1 - Math.min(Math.abs(progress * 0.5), 1); var opacity = 1 - Math.min(Math.abs(progress/2),0.5); slide.style.opacity = opacity; es = slide.style; es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = 'translate3d(0,'+translate+'px,-'+translate+'px) scaleY(' + scale + ')'; } }, onSetTransition: function(swiper, speed) { for (var i = 0; i < swiper.slides.length; i++){ es = swiper.slides[i].style; es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration = speed + 'ms'; } }, }) </script> </body> </html>

评论收藏

内容反馈