touch事件的图片滑动
0
[已解决问题]
解决于 2017-04-12 16:32
问题比较模糊，标题不好描述，直接上代码，请问有人知道解决吗？
css代码：
* {
margin:0;
padding:0;
}
body {
font-size:12px;
font-family:宋体,arial, helvetica, sans-serif;
color:#282828;
margin:0 auto;
}
.apply {
margin-top: 20px;
overflow: hidden;
width:1000px;
border:1px solid yellow;
margin-left:100px;
}
.apply_nav{
position: relative;
width: 996px;
float: left;
height: 252px;
overflow: hidden;
border:1px solid green;
}
.apply_w {
position: absolute;
margin-top: 22px;
float: left;
border:1px solid red;
}
.apply_array {
width: 198px;
float: left;
height: 212px;
border: #cdcdcd 1px solid;
padding-top: 16px;
}
html 代码：
<div>
<div class="apply">
<div class="apply_nav">
<div class="apply_w">
<div class="apply_array" id="inp">
<div class="apply_img"><img src="imgs/sinaminiblog.gif"></div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="imgs/kaixin001.gif"></div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="imgs/renren.gif"></div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="imgs/baiducang.gif"></div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="imgs/qq.gif"></div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="imgs/qqshuqian.gif"></div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="imgs/qqzone.gif"></div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="imgs/sinavivi.gif"></div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="imgs/sohubai.gif"></div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="imgs/douban.gif"></div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="imgs/zhuaxia.gif"></div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="imgs/gmail.gif"></div>
</div>
<div class="apply_array">
<div class="apply_img"><img src="imgs/delicious.gif"></div>
</div>
</div>
</div>
</div>
</div>
js 代码：
$(function() {
$li1 = $(".apply_nav .apply_array"); //获取到里面每一个div
$window1 = $(".apply .apply_w"); //获取包裹最里面div的大div
$window1.css("width", $li1.length*200); //设置包裹图片的外层div的宽度等于 图片的张数*每张图片的宽度 = 外层div总宽度;
$window1.on({
touchstart: function(e){
var el=$(this);
var os = el.offset();
dx =e.originalEvent.targetTouches[0].pageX-os.left ; //e.originalEvent.targetTouches[0].pageX 鼠标位置 os.left向左边偏移量
$(document).on('touchmove.drag', function(e){
el.offset({ left: e.originalEvent.targetTouches[0].pageX-dx});
});
},
touchend: function(e){ $(document).off('touchmove.drag'); }
});
});
我的运行效果图：
鼠标滑上带图片的div是可以左右拖动的。但是到第一张和最后一张居然也可以拖动。
不知道怎么解决，有人知道吗，怎么样让他在第一张图片的时候不能往左移了，最后一张不能往后移
最佳答案
0
向左向右计算偏移的时候应该有个临界值， left: e.originalEvent.targetTouches[0].pageX-dx：这个值不应该大于（图片列表的总长度 - 图片展示区的宽度）
如果大于，那么直接赋值：left: （图片列表的总长度 - 图片展示区的宽度）
奖励园豆：5
这样的话前面还是能滑动出去，我不知道要怎么控制
@苏黎世宝贝:
比如：展示区宽度为5张图，图片列表为9张；那么图片列表div的x偏移值的区间就为（-4，0）
touch导致的偏移量加上div本身已经产生的偏移量叠加之后：需在区间（-4,0）之内
例：div左边已经偏移一张图片了，那么touch的偏移量就该在（-3,1）里了
leftOffset = e.originalEvent.targetTouches[0].pageX-dx;
if ((e.originalEvent.targetTouches[0].pageX-dx)<-4) leftOffset = -4;
if ((e.originalEvent.targetTouches[0].pageX-dx)>0) leftOffset = 0;
el.offset({ left:leftOffset});
@codingHeart: leftOffset表示的是什么呢
@苏黎世宝贝: 上面答案 修改了下
@codingHeart:
您好，按照你给的，然后我将我的代码改成这样，还是可以前后移动一点点。
我有13张图片，但是展示区域显示5张，每张图片宽度200px.
leftOffset = e.originalEvent.targetTouches[0].pageX-dx;
if ((e.originalEvent.targetTouches[0].pageX-dx)<-9*200) leftOffset = -9*200;
if ((e.originalEvent.targetTouches[0].pageX-dx)>0) leftOffset = -0;
el.offset({ left:leftOffset});
您的意思应该是这样对吧。可是还是会可以往后移
@codingHeart: 
像这一种第一张图片进去半张拖不出来，最后一张图片后面多出半张
@苏黎世宝贝: 13-5 =8 吧....
@codingHeart: 写8也是一样的，就是会滑到最前面进去半张，滑到最后面出来半张。
硬要换成：
if ((e.originalEvent.targetTouches[0].pageX-dx)<-yx) leftOffset = -yx+$li1.width()/2;
if ((e.originalEvent.targetTouches[0].pageX-dx)>0) leftOffset = $li1.width()/2;
才算好的
@苏黎世宝贝: 好吧，任务是解决了，但问题还在，毕竟跟想的不一样，有时间梳理下代码再看看吧。
@苏黎世宝贝: 我也是看不出来问题在哪，拖动的思路就是这样的
@codingHeart: 好的，谢谢呀。
