期权记-ETF期权开户导航 期权记是专业的50ETF300ETF期权开户投资交易导航

swiper animate运动的实现

<!DOCTYPE html>      <html>      	<head>      		<meta charset="UTF-8">      		<title></title>      		<link rel="stylesheet" href="../uu/swiper-4.4.1.min.css">      		<link rel="stylesheet" href="../uu/animate.min.css">      		<style type="text/css">      			.swiper-container {        			width: 800px;         		height: 400px;         		border: 1px solid darkcyan;         		margin: 100px auto;      			}      			.swiper-container .swiper-wrapper .swiper-slide.one h1{      				width: 400px;      				margin: 100px auto;      				text-align: center;      			}      			.swiper-container .swiper-wrapper .swiper-slide.one p{      				width: 300px;      				margin: 100px auto;      				text-align: center;      				font-size: 16px;      			}      			.swiper-container .swiper-wrapper .swiper-slide{      				text-align: center;      				line-height: 400px;      			}      		</style>      	</head>      	<body>      		<div class="swiper-container">      <div class="swiper-wrapper">      <div class="swiper-slide one" style="background: darkblue;color: white;" >             	<h1 class=" ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="1s">这里是H1的内容</h1>             	<p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s">50 swiper animate运动的实现</p></div>      <div class="swiper-slide" style="background: darkcyan;">Slide 2</div>      <div class="swiper-slide" style="background: darkgoldenrod;">Slide 3</div>      </div>      <!-- 如果需要分页器 -->      <div class="swiper-pagination"></div>      <!-- 如果需要导航按钮 -->      <div class="swiper-button-prev"></div>      <div class="swiper-button-next"></div>      <!-- 如果需要滚动条 -->      <div class="swiper-scrollbar"></div>      </div>      		<script src="../uu/swiper-4.4.1.min.js"></script>      		<script src="../uu/swiper.animate1.0.3.min.js" type="text/javascript"></script>      		<script>              var mySwiper = new Swiper ('.swiper-container', {      direction: 'horizontal', // 垂直切换选项      loop: true, // 循环模式选项      // 如果需要分页器      pagination: {      el: '.swiper-pagination',      },      // 如果需要前进后退按钮      navigation: {      nextEl: '.swiper-button-next',      prevEl: '.swiper-button-prev',      },      // 如果需要滚动条      scrollbar: {      el: '.swiper-scrollbar',      },      //  运动的初始化      on:{      init: function(){      swiperAnimateCache(this); //隐藏动画元素      swiperAnimate(this); //初始化完成开始动画      },      slideChangeTransitionEnd: function(){      swiperAnimate(this); //每个slide切换结束时也运行当前slide动画      //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次,去除ani类名      }      }      })      </script>      	</body>      </html>

代码效果点上面的(运行代码)看

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

作者:期权小韭菜 分类:网页教程 浏览:
请先 登录 再评论,若不是会员请先 注册