查看: 1630|回复: 0
打印 上一主题 下一主题

某一页面内容高度高,导致动画无效果,怎样能得到

[复制链接]

该用户从未签到

2

主题

3

帖子

9

积分

新手上路

Rank: 1

积分
9
跳转到指定楼层
楼主
发表于 2017-6-17 10:40:10 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<!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>


分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Swiper中文网 ( 粤ICP备15001020号

GMT+8, 2024-11-24 11:48 , Processed in 0.070961 second(s), 28 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表