问答详情
源自:4-3 页面与人物之间形成的视觉差效果

为什么我的页面没有滚动起来啊,然后直接运行结果也没有效果

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>慕课七夕主题</title>
    <link rel='stylesheet' href='style.css' />
    <link rel='stylesheet' href='pageA.css' />
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="http://img.mukewang.com/down/55ac9ea30001ace700000000.js"></script>
    <script type="text/javascript" src="Swipe.js"></script>
    <script type="text/javascript" src="BoyWalk.js"></script>
</head>

<body>
    <div id='content'>
        <ul class='content-wrap'>
            <li>
                <div class="a_background">
                    <div class="a_background_top"></div>
                    <div class="a_background_middle"></div>
                    <div class="a_background_botton"></div>
                </div>
            </li>
            <li> 页面2 </li>
            <li> 页面3 </li>
        </ul>
        <div id="boy" class="charector"></div>
    </div>
    <div class="button">
        <button>开始</button>
    </div>
</body>
<script type="text/javascript">
    $(function() {
    
        var container = $("#content");
        var swipe = Swipe(container);
        // 页面滚动到指定的位置
        function scrollTo(time, proportionX) {
            var distX = container.width() * proportionX;
            swipe.scrollTo(distX, time);
        }
    
        ////////////////////////////////////////////////////////
        //=================== 动画处理 =======================//
        ////////////////////////////////////////////////////////
    
        var boy = BoyWalk();
    
        // 开始
        $("button:first").click(function() {
    
    
            // 开始第一次走路
            boy.walkTo(2000, 0.2)
                .then(function() {
                    // 第一次走路完成
                    // 开始页面滚动
                    scrollTo(5000,1);
                }).then(function() {
                    // 第二次走路
                    return boy.walkTo(5000, 0.5);
                });
        });
    
    })
</script>

</html>

提问者:lyesnake 2015-09-17 17:36

个回答

  • 别担心_有我陪着你
    2015-11-26 11:23:27

    你是不是用本地浏览器看的效果,如果是的话,是因为浏览器的兼容问题,

    在swipe.js中,加上浏览器兼容性,代码如下

     // 监控完成与移动

        swipe.scrollTo = function(x, speed) {

            // 执行动画移动

            element.css({

                'transition-timing-function' : 'linear',

                '-moz-transition-timing-function': linear, /* Firefox 4 */

                '-ms-transition-timing-function': linear, /* Firefox 4 */

                '-webkit-transition-timing-function': linear, /* Safari 和 Chrome */

                '-o-transition-timing-function': linear, /* Opera */


                'transition-duration'        : speed + 'ms',

                'transform'                  : 'translate3d(-' + x + 'px,0px,0px)',

                '-webkit-transition-duration'        : speed + 'ms',

                '-webkit-transform'          : 'translate3d(-'+ x + 'px,0px,0px)',

                '-moz-transition-duration'        : speed + 'ms',

                '-moz--transform'            : 'translate3d(-'+ x + 'px,0px,0px)',

                '-ms-transition-duration'        : speed + 'ms',

                '-ms-transform'              : 'translate3d(-'+ x + 'px,0px,0px)',

                '-o-transition-duration'        : speed + 'ms',

                '-o-transform'               : 'translate3d(-'+ x + 'px,0px,0px)'

            });

            return this;

        };


  • echo_kinchao
    2015-09-18 17:41:01

    把报错的写出来啊

  • pardon110
    2015-09-18 09:09:47

    请贴出你的报错信息,或者提供你写的全部代码,包括本页面贴出来的引用样式和js.否则无法分析你的错误。