<!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>頁(yè)面2</li>
????<!--第三副畫面-->
????<li>頁(yè)面3</li>
??</ul>
??<!--與頁(yè)面根節(jié)點(diǎn)并列-->
??<div?class="charector?slowwalk"?id="boy"></div>
</div>??<div?class="button">
??<button>點(diǎn)擊開(kāi)始走路</button>
??<button>暫停</button>
???</div>
<script?type="text/javascript">
????var?swipe?=?swipe($("#content"));
var?getValue?=?function(className)?{
????????var?$elem?=?$(''?+?className?+?'')
????????//?走路的路線坐標(biāo)
?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
????});
????//?開(kāi)始
????$("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>
