-
本版专家分：6结帖率 100% -
现在两个div,想用就Jquery的touchSwipe插件实现从左向右滑动。请大家指导,感激不进。
-
本版专家分：396045
-
- 探花 2017年 总版技术专家分年内排行榜第三
-
-
进士
2018年总版新获得的技术专家分排名前十
2013年 总版技术专家分年内排行榜第五
-
-
金牌
2018年5月 总版技术专家分月排行榜第一
2018年4月 总版技术专家分月排行榜第一
2018年2月 总版技术专家分月排行榜第一
2017年8月 总版技术专家分月排行榜第一
-
-
银牌
2018年3月 总版技术专家分月排行榜第二
2017年11月 总版技术专家分月排行榜第二
2016年2月 总版技术专家分月排行榜第二
2014年2月 总版技术专家分月排行榜第二
2013年4月 总版技术专家分月排行榜第二
-
-
本版专家分：7049 -
两个Div的话，，，可以用css动画。。。
-
本版专家分：6
-
现在两个div左右滑动的话就是在pad上用
-
本版专家分：6
-
现在用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
-
没人知道吗？？顶起来
- jquery-iscroll.js鼠标控制ul左右滑动
jquery-iscroll.js鼠标控制ul左右滑动
- jquery-1.11.0+jquery-UI-1.10.4
jquery-1.11.0 + jquery-UI-1.10.4
- jquery-ui-1.8.18.custom,jquery-ui-1.8.18.custom.min,jquery-1.7.1.min
jquery-ui-1.8.18.custom包含所有jquery-ui所需的工具资料
- jquery-1.10.2.js 和 jquery-1.10.2.min.js 【jquery-1.10.2包合集】
jquery-1.10.2.js 与 jquery-1.10.2.min.js , jquery的js包合集。
- jquery.min.js jquery-1.4.2.min.js jquery-1.4.4.min.js jquery-1.10.2.min.js.zip
jquery.js jquery.min.js jquery-1.4.2.min.js jquery-1.4.4.min.js jquery-1.10.2.min.js 集合
- jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】
jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】
- jquery-sliding-menu左右滑动导航插件
jquery-sliding-menu左右滑动导航插件
- jquery-3.1.1.js和jquery-3.1.1.min.js
jquery中jquery-3.1.1.js和jquery-3.1.1.min.js两个工具类。bootstrap的treeview插件用到了，找到就传上来备忘。
- jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】
jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】
- jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css
这里包含jquery-ui-1.8.16.custom.min.js/jquery-ui-1.8.16.custom.css，我费了好长时间找到的，此东西可以配合jQuery UI开发指南一书使用。
- jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】
jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】
- jquery-1.7.2.js 、jquery-1.7.2.min.js 【官方jquery包 js】
jquery-1.7.js 、jquery-1.7.2.min.js 【官方jquery包 js】
- jquery-2.0.0.js 、jquery-2.0.0.min.js 【官方jquery包 js】
jquery-2.0.0.js 、jquery-2.0.0.min.js 【官方jquery包 js】
- jquery.touchSwipe.min.js
jquery.touchSwipe.min.js
- jquery-1.8.3下载
jquery-1.8.3jquery-1.8.3jquery-1.8.3jquery-1.8.3jquery-1.8.3jquery-1.8.3jquery-1.8.3jquery-1.8.3jquery-1.8.3
- jquery 文字由左向右滚动 走马灯
jquery 文字由左向右滚动 走马灯 兼容性比较好
- jquery-3.2.1.js 、 jquery-3.2.1.min.js 【jquery包，最新的截止到2017-11-1】
jquery-3.2.1.js 、 jquery-3.2.1.min.js 【jquery包，最新的截止到2017-11-1】。
- jquery-3.0.0.js和 jquery-3.0.0.min.js
jquery-3.0.0.js和 jquery-3.0.0.min.js，纯净正版。 JQuery是一个快速简洁的JavaScript框架，使用户能更方便快捷得处理HTML文档、事件、实现动画效果，且方便地为网站提供AJAX交互。
- 免费 jquery-1.5.1.js;jquery-1.5.1.min.js
jquery-1.5.1.js;jquery-1.5.1.min.js 框架
- jquery-3.1.1.js 、jquery-3.1.1.min.js 【jquery包 js】
jquery-3.1.1.js 、jquery-3.1.1.min.js 【jquery包 js】