<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>七夕浪漫情缘</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/pageA.css"/>
<script type="text/javascript" src="js/swipe.js"></script>
<style type="text/css">
.pausewalk{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
}
</style>
</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 class="charector slowwalk" id="boy"></div>
</div> <div class="button">
<button>点击开始走路</button>
<button>暂停</button>
</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;
}();
var $boy = $("#boy");
var boyHeight = $boy.height();
// 修正小男孩的正确位置
$boy.css({
top: pathY - boyHeight + 25
});
// 开始
$("button:first").click(function() {
$boy.addClass('slowwalk').transition({
'left': $("#content").width() + 'px',
}, 10000);
});
$("button:last").click(function() {
var left =$boy.css('left');
$boy.css('left',left);
$boy.addClass('pausewalk');
});
</script>
</body>
</html>
