<!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' /> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="Swipe.js"></script></head><style type="text/css"> .charector { position: absolute; left: 6%; top: 55%; width: 151px; height: 291px; background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat; } .slowWalk { /*规定 @keyframes 动画的名称。*/ -webkit-animation-name: person-slow; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/ -webkit-animation-duration: 950ms; /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/ -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; } }</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_botton"></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")); // 获取数据 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').click(function(){ // 增加走路的CSS3关键帧规则 $boy.addClass('slowWalk'); }); </script></body></html>
1 回答
- 1 回答
- 0 关注
- 904 浏览
添加回答
举报
0/150
提交
取消