<!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>點(diǎn)擊開始動畫</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'));
//獲取數(shù)據(jù)
var?getValue=function(className){
var?$elem=$(''+className+'')
?//?走路的路線坐標(biāo)
?//?小男孩的top坐標(biāo)值?=?中間路段的中間坐標(biāo)值?-?小男孩的高度
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關(guān)鍵幀規(guī)則
?????????$boy.addClass('slowWalk');
????});
</script>
</body>
</html>//在swipe.js中定義一個SwipeFun方法
//
/**
?*?[Swipe?description]
?*?@param?{[type]}?container?[頁面容器節(jié)點(diǎn)]
?*?@param?{[type]}?options???[參數(shù)]
?*/
function?Swipe(container)?{
var?ct=$('.ct');//獲取容器
var?el=ct.find(':first')??//?獲取第一個子節(jié)點(diǎn)
?
var?slides=el.find('li')?//?li對象數(shù)組
var?width=ct.width();?//?獲取容器寬度
?
var?height=ct.height();//??獲取容器高度
var?ct=$('.ct');//獲取容器
var?el=ct.find(':first')??//?獲取第一個子節(jié)點(diǎn)
?
var?slides=el.find('li')?//?li對象數(shù)組
var?width=ct.width();?//?獲取容器寬度
?
var?height=ct.height();//??獲取容器高度
?//?設(shè)置li頁面總寬度,即父容器ul的寬度，高度?
?el.css({
? width:(slides.length*width)+'px',
? height:height+'px'
?});
????//?設(shè)置每一個頁面li的寬度
?$.each(slides,?function(index)?{
? ?var?slide=slides.eq(index);
? ?slide.css({
? ? height:width+'px',
? ? width:width+'px'
? ?})
?});
???var?swipe?=?{};
//?監(jiān)控完成與移動
???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;
}
2016-12-06
你的布局里就沒導(dǎo)入背景圖片，所以不可能有背景圖
如：這樣
<div class="a_background">
?? ?<div class="a_top"></div>
?? ?<div class="a_middle"></div>
?? ?<div class="a_bottom"></div>
</div>
2016-12-30
你根據(jù)網(wǎng)址把圖片下載下來保存到項(xiàng)目里，在從項(xiàng)目里直接引用
2016-12-18
在線編輯器也顯示不出來啊
2016-12-07
還是不行啊，唉，在編輯器里打開就是不顯示背景圖，在線把代碼寫上去就行，問什么