请问为什么我的页面始终实现不了动画啊？
慕婉清0967667
2016-10-22 16:16
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简历版本1</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="pageA.css">
<script type="text/javascript" src="Swipe.js"></script>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<style type="text/css">
.charector{
position:absolute;
width:151px;
height:291px;
left: 6%;
top: 55%;
background:url(images/boy.png) 0px -291px no-repeat;
}
.slowWalk{
/*规定 @keyframes 动画的名称。*/
-webkit-animation-name: person-slow;/*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
-webkit-animation-duration: 950ms;/*规定动画被播放的次数。默认是 1。 infinite(无限循环播放)*/
-webkit-animation-iteration-count: infinite;/*动画切换的方式是一帧一帧的改变*/
-webkit-animation-timing-function: steps(1, start);
-moz-animation-name: person-slow;
-moz-animation-duration: 950ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(1, start);
}
/*普通慢走*/
/*webkit是为了与chrome浏览器兼容*/
@-webkit-keyframes person-slow{
/*@keyframes规是创建动画。则内指定一个CSS样式和动画将逐步从目前样式更改为新的样式*/
0%{
background-position: 0px -291px;
}
25%{
background-position: -602px 0px;
}
50%{
background-position: -302px -291px;
}
75%{
background-position: -151px -291px;
}
100%{
background-position: 0px -291px;
}
}
/*moz是为了与火狐浏览器兼容*/
@-moz-keyframes person-slow{
0%{
background-position: 0px -291px;
}
25%{
background-position: -602px 0px;
}
50%{
background-position: -302px -291px;
}
75%{
background-position: -151px -291px;
}
100%{
background-position: 0px -291px;
}
}
</style>
<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_button"></div>
</div>
</li>
<!-- 第二副画面 -->
<li> 页面2 </li>
<!-- 第三副画面 -->
<li> 页面3 </li>
</ul>
<div id="boy" class="charector"></div>
<div class="button">
<button>点击开始动画</button>
</div>
</div>
<script type="text/javascript">
var swipe = Swipe($("#content"));
//获取数据
var getValue = function(className){
var $elem = $('' + className + '');
//走路的路线坐标
return{
height:$elem.height(),
top:$elem.position().top
};
};
//路的Y轴
var pathY = function(){
var data = getValue('.a_background_middle');
return data.top + data.height / 2;
}();
$boy.css({
top: pathY-boyHeight + 25
});
// 修正小男孩的正确位置
// 路的中间位置减去小孩的高度，25是一个修正值
//通过js动态修正小男孩的TOP布局坐标
//增加精灵动画
$('button').click(function(){
$boy.addClass('slowWalk');
});
</script>
</body>
</html>
2回答
-
- qq_缔曦_04032696
- 2016-11-26 18:48:18
你在页面上单击按钮了么，没看到按钮的话 按f11 全屏显示
-
- 慕粉3583999
- 2016-10-26 16:02:15
看看你的js加载路径对不？
H5+JS+CSS3实现七夕言情
211525 学习 · 540 问题
相似问题