請問為什么我的頁面始終實現(xiàn)不了動畫啊？
<!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{
/*規(guī)定 @keyframes 動畫的名稱。*/
? ? -webkit-animation-name: person-slow;/*規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0*/ ??
? ? -webkit-animation-duration: 950ms;/*規(guī)定動畫被播放的次數(shù)。默認是 1。 infinite(無限循環(huán)播放)*/ ?
? ? -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規(guī)是創(chuàng)建動畫。則內指定一個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"));
//獲取數(shù)據
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動態(tài)修正小男孩的TOP布局坐標
//增加精靈動畫
$('button').click(function(){
$boy.addClass('slowWalk');
});
</script>
</body>
</html>
2016-11-26
你在頁面上單擊按鈕了么，沒看到按鈕的話 按f11 全屏顯示
2016-10-26
看看你的js加載路徑對不？