<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Conten-type" content="text/html;charset=utf-8">
<title>Coisini七夕</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="background.css" />
<script type="text/javascript" src="Swipe.js"></script>
<style type="text/css">
.charector{
width: 151px;
height: 291px;
background: url(./src/boy-walk.png) -0px -291px no-repeat;
position: absolute;
/*设置一个元素的坐标*/
left: 6%;
top: 55%;
}
</style>
</head>
<body>
<div id='content'>
<ul class='content-wrap'>
<li>
<div class="a_background"></div>
<div class="a_background_top"></div>
<div class="a_background_middle"></div>
<div class="a_background_botton"></div>
</li>
<li>two</li>
<li>three</li>
</ul>
<div id="boy" class="charector"></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();
//修正小男孩的正确位置
//路的中间位置减去小男孩的高度，25是一个修正值
$boy.css({
top: pathY - boyHeight + 25
});
</script>
</body>
</html>
swipe.js文件
function Swipe (container) {
//获取第一个子节点
var element=container.find(":first");
//滑动对象
var swipe={};
//页面数量
var slides=element.find("li");
//获取容器尺寸
var width = container.width();
var head = container.height();
//设置li页面的总宽度
element.css({
width: (slides.length * width) + 'px',
height: height + 'px'
});
//设置每一个li的宽度
$.each(slides,function (index) {
var slides=slides.eq(index);
//获取到每一个li元素
slides.css({
width:width+'px',
height:height+'px'
});
});
//监控完成与移动
swipe.scrollTo=function(x,speed){
//执行动画移动
element.css({
'transition-timing-function': 'linear',
'transition-duration': speed+'ms',
'transform': 'translate3d(-' + x + 'px,0px,0px)' //设置页面X轴移动
});
return this;
};
return swipe;
}
第一个第三个已解决