為什么我的頁面沒有滾動起來啊,然后直接運行結果也沒有效果
<!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://img1.sycdn.imooc.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>
2015-11-26
你是不是用本地瀏覽器看的效果,如果是的話,是因為瀏覽器的兼容問題,
在swipe.js中,加上瀏覽器兼容性,代碼如下
?// 監(jiān)控完成與移動
? ? swipe.scrollTo = function(x, speed) {
? ? ? ? // 執(zhí)行動畫移動
? ? ? ? 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;
? ? };
2015-09-18
把報錯的寫出來啊
2015-09-18
請貼出你的報錯信息,或者提供你寫的全部代碼,包括本頁面貼出來的引用樣式和js.否則無法分析你的錯誤。