|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>长动画测试</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!--swiper-->
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/swiper-3.4.2.min.css">
<script src="js/swiper-3.4.2.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
</head>
<body>
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<div class="swiper-slide">Vertical Slide 1</div>
<div class="swiper-slide second">
<div class="swiper-container swiper-container-scrollbar">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h3>title</h3>
<p>this is a p tag</p>
美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。
美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。"美丽家园"就是要全面践行科学发展观，加快资源
节约型和环境友好型社会建设，促进世界园艺事业大发展、
大繁荣，共同建设多资多彩的美好家园。
</div>
</div>
<div class="swiper-scrollbar"></div>
</div>
</div>
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="flash" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">Vertical Slide 3</p>
</div>
<div class="swiper-slide">Vertical Slide 4</div>
</div>
</div>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
</script>
<script>
var swiperV = new Swiper('.swiper-container-v', {
direction: 'vertical'
});
var swiperScrollbar = new Swiper('.swiper-container-scrollbar', {
scrollbar: '.swiper-container-scrollbar .swiper-scrollbar',
direction: 'vertical',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
nested: true
});
</script>
</body>
</html>
|
|
发表于 2017-6-17 10:41:01
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
淘帖
