1.swipe.js打不開。2.圖片能夠再java控制臺顯示但是不能在網頁中顯示 3.提示swipe未定義
<!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;
}
2019-06-08
第一個第三個已解決