为什么我的页面没有滚动起来啊，然后直接运行结果也没有效果
lyesnake
2015-09-17 17:36
<!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>
3回答
-
- 别担心_有我陪着你
- 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.否则无法分析你的错误。
H5+JS+CSS3实现七夕言情
211525 学习 · 540 问题
相似问题