<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>七夕言情2</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
html,body{width: 100%;height:100%;}
ul,li{list-style: none}
#ct{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
.wrap{
position: relative;
}
.wrap>li{
float: left;
overflow: hidden;
position: relative;
}
.a_background{
width: 100%;
height: 100%;
position: absolute;
}
.a_top{
width: 100%;
height: 71.6%;
background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png");
background-size: 100% 100%;
}
.a_middle{
width: 100%;
height: 13.1%;
background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png");
background-size: 100% 100%;
}
.a_bottom{
width: 100%;
height: 15.3%;
background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png");
background-size: 100% 100%
}
.charector{
width: 151px;
height: 291px;
background: url("http://img1.sycdn.imooc.com//55ade248000198ae10550582.png") -0px -291px no-repeat;
position: absolute;
left: 6%;
top:55%;
}
button {
width: 100px;
height: 50px;
}
.button {
position: absolute;
bottom: 0;
}
.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;
}
}
</style>
</head>
<body>
<div id="ct">
<ul>
<li>
<div>
<div></div>
<div></div>
<div></div>
</div>
</li>
<li>页面2</li>
<li>页面3</li>
</ul>
<div id="boy"></div>
<div>
<button>点击开始动画</button>
</div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="swipe.js"></script>
<script type="text/javascript">
var swipe=Swipe($('#ct'));
//获取数据
var getValue=function(className){
var $elem=$(''+className+'')
// 走路的路线坐标
// 小男孩的top坐标值 = 中间路段的中间坐标值 - 小男孩的高度
return{
height:$elem.height(),
top: $elem.position().top
}
}
// 路的Y轴
var pathY=function(){
var data=getValue('.a_middle');
return data.top+data.height /2;
}();
var $boy=$('#boy');
var $boyHeight=$boy.height();
// 修正小男孩的正确位置
// 路的中间位置减去小孩的高度，25是一个修正值
// $boy.css({
// top:pathY-$boyHeight+25
// });
$('button').click(function(){
// 增加走路的CSS3关键帧规则
$boy.addClass('slowWalk');
});
</script>
</body>
</html>//在swipe.js中定义一个SwipeFun方法
//
/**
* [Swipe description]
* @param {[type]} container [页面容器节点]
* @param {[type]} options [参数]
*/
function Swipe(container) {
var ct=$('.ct');//获取容器
var el=ct.find(':first') // 获取第一个子节点
var slides=el.find('li') // li对象数组
var width=ct.width(); // 获取容器宽度
var height=ct.height();// 获取容器高度
var ct=$('.ct');//获取容器
var el=ct.find(':first') // 获取第一个子节点
var slides=el.find('li') // li对象数组
var width=ct.width(); // 获取容器宽度
var height=ct.height();// 获取容器高度
// 设置li页面总宽度,即父容器ul的宽度，高度
el.css({
width:(slides.length*width)+'px',
height:height+'px'
});
// 设置每一个页面li的宽度
$.each(slides, function(index) {
var slide=slides.eq(index);
slide.css({
height:width+'px',
width:width+'px'
})
});
var swipe = {};
// 监控完成与移动
swipe.scrollTo = function(x, speed) {
el.css({
'transition-timing-function':'linear',
'transition-duration':speed+'ms',
'transform':'translate3d(-'+x+'px,0px,0px)'
});
//return this;
};
return swipe;
}
