                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /H5+JS+CSS3實現七夕言情

人物原地踏步為什么

<!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>