查看: 1766|回复: 2
打印 上一主题 下一主题

某一页面高度高,导致动画无效果,怎样让页面动画有效果

[复制链接]

该用户从未签到

2

主题

3

帖子

9

积分

新手上路

Rank: 1

积分
9
跳转到指定楼层
楼主
发表于 2017-6-17 10:41:01 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
<!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空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 分享淘帖
回复

使用道具 举报

  • TA的每日心情

    2017-7-12 18:36
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    0

    主题

    10

    帖子

    38

    积分

    新手上路

    Rank: 1

    积分
    38
    沙发
    发表于 2017-6-21 14:35:08 | 只看该作者
    楼主 问题解决了吗?
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    开心
    2017-7-25 10:04
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    0

    主题

    10

    帖子

    35

    积分

    新手上路

    Rank: 1

    积分
    35
    板凳
    发表于 2017-6-30 16:33:56 | 只看该作者
    遇到同样的问题~求楼主帮忙解答
    回复 支持 反对

    使用道具 举报

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

    本版积分规则

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

    GMT+8, 2024-11-24 07:59 , Processed in 0.082342 second(s), 26 queries .

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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