现在用touchSwipe 触摸pad屏幕,实现从左向右滑动的效果,请各位大神指教。
我现在只能实现上下滑动,而不能实现左右
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="bootstrap.css" type="text/css"/>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<style>
.jc {
width: 100vw;
height: 100vh;
background: url(img/index.png) no-repeat;
background-size: 100% 100%;
}
.jc p {
width: 34vw;
margin: 0 auto;
padding-top: 60vh;
line-height: 6vh;
}
.jc p img {
width: 13.2vw;
height: 5.789vh;
float: left
}
.jc p span {
color: #000;
font-size: 4vw;
float: left;
display: block
}
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0%;
}
.container .page {
height: 100%;
position: relative;
}
/*.container .page2 {
left: 100%;
position: relative;
}*/
</style>
</head>
<body>
<div class="container">
<div class="jc col-xs-12 col-sm-12 page " id="prev">
<p><img src="img/font.png"><span>张筱筱女士</span></p>
</div>
<div id="next" class="page">
<ul class="nav nav-tabs">
<li class="active"><a href="#security_plan" data-toggle="tab">保障计划</a></li>
<li><a href="#security_concept" data-toggle="tab">保险理念</a></li>
<li><a href="#company_introduction" data-toggle="tab">公司介绍</a></li>
<li><a href="#market_information" data-toggle="tab">营销员信息</a></li>
</ul>
<div class="tab-content">
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var nowpage = 0;
$(".container").swipe({
swipe: function (event, direction, distance, duration, fingerCount) {
if (direction == "left") {
nowpage = nowpage + 1;
} else if (direction == "right") {
nowpage = nowpage - 1;
}
if (nowpage > 2) { //此处定义全屏滑动张数
nowpage = 2;
}
if (nowpage < 0) {
nowpage = 0;
}
$(".container").animate({
"top": nowpage * -100 + "%"
}, 400);
//$("#next").show();
}
});
})
</script>
</body>
</html>
本版专家分：6结帖率 96.97%
版主本版专家分：396073
本版专家分：7049
两个Div的话，，，可以用css动画。。。
