<!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' />
<style type="text/css">
button {
width: 80px;
height: 50px;
}
.button {
position: absolute;
bottom: 0;
}
/*人物暂停*/
.pauseWalk {
animation-play-state: paused;
}
</style>
<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>
</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() {
// 开始
$("button:first").click(function() {
// 10秒钟 ，走到0.5 也就是页面中间位置
var distX = calculateDist('x', 0.5);
var distY = calculateDist('y', 0.5);
walkRun(10000, distX, distY);
});
})
</script>
<script type="text/javascript" src="Swipe.js"></script>
<script type="text/javascript" src="Qixi.js"></script>
</html>
var container = $("#content");
// 页面可视区域
var visualWidth = container.width();
var visualHeight = container.height();
var swipe = Swipe(container);
// 获取数据
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;
}();
var $boy = $("#boy");
var boyHeight = $boy.height();
// 修正小男孩的正确位置
$boy.css({
top: pathY - boyHeight + 25
});
////////////////////////////////////////////////////////
//===================动画处理============================ //
////////////////////////////////////////////////////////
// 恢复走路
function restoreWalk() {
$boy.removeClass('pauseWalk');
}
// css3的动作变化
function slowWalk() {
$boy.addClass('slowWalk');
}
// 计算移动距离
function calculateDist(direction, proportion) {
return (direction == "x" ?
visualWidth : visualHeight) * proportion;
}
// 用transition做运动
function stratRun(options, runTime) {
var dfdPlay = $.Deferred();
// 恢复走路
restoreWalk();
// 运动的属性
$boy.transition(
options,
runTime,
'linear',
function() {});
return dfdPlay;
}
// 开始走路
function walkRun(time, dist, disY) {
time = time || 3000;
// 脚动作
slowWalk();
// 开始走路
var d1 = stratRun({
'left': dist + 'px',
'top': disY ? disY : undefined
}, time);
return d1;
}
/////////
//页面滑动 //
/////////
/**
* [Swipe description]
* @param {[type]} container [页面容器节点]
* @param {[type]} options [参数]
*/
function Swipe(container) {
// 获取第一个子节点
var element = container.find(":first");
var swipe = {};
// li页面数量
var slides = element.find("li");
// 获取容器尺寸
var width = container.width();
var height = container.height();
// 设置li页面总宽度
element.css({
width: (slides.length * width) + 'px',
height: height + 'px'
});
// 设置每一个页面li的宽度
$.each(slides, function(index) {
var slide = slides.eq(index); // 获取到每一个li元素
slide.css({
width: width + 'px',
height: height + 'px'
});
});
// 监控完成与移动
swipe.scrollTo = function(x, speed) {
// 执行动画移动
element.css({
'transition-timing-function' : 'linear',
'transition-duration' : speed + 'ms',
'transform' : 'translate3d(-' + x + 'px,0px,0px)'
});
return this;
};
return swipe;
}
/*背景图*/
.a_background {
width: 100%;
height: 100%;
position: absolute;
}
.a_background_top{
width: 100%;
height: 71.6%;
background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png");
background-size: 100% 100%;
}
.a_background_middle{
width: 100%;
height: 13.1%;
background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png");
background-size: 100% 100%;
}
.a_background_botton{
width: 100%;
height: 15.3%;
background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png");
background-size: 100% 100%;
}
* {
padding: 0;
margin: 0;
}
ul,
li {
list-style-type: none;
}
/*主体部分*/
#content {
width: 100%;
height: 100%;
/* top: 20%; */
overflow: hidden;
position: absolute;
}
.content-wrap {
position: relative;
}
.content-wrap > li {
/* background: #CAE1FF;
color: red; */
float: left;
overflow: hidden;
position: relative;
}
/* li:nth-child(2) {
background: #9BCD9B;
}
li:nth-child(3) {
background: yellow;
}
a {
position: absolute;
top: 50%;
left: 40%;
} */
.charector {
left: 0%;
top: 55%;
position: absolute;
/* width: 100%;
height: 100%; */
width: 151px;
height: 291px;
background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat;
}
.slowWalk {
-webkit-animation-name: person-slow;
-webkit-animation-duration: 950ms;
-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-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;
}
}
@-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;
}
}
