首页新闻找找看学习计划

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是可以左右拖动的。但是到第一张和最后一张居然也可以拖动。

不知道怎么解决,有人知道吗,怎么样让他在第一张图片的时候不能往左移了,最后一张不能往后移

苏黎世宝贝的主页 苏黎世宝贝 | 菜鸟二级 | 园豆:279
提问于:2017-04-11 14:41
< >
分享
最佳答案
0

向左向右计算偏移的时候应该有个临界值, left: e.originalEvent.targetTouches[0].pageX-dx:这个值不应该大于(图片列表的总长度 - 图片展示区的宽度)

如果大于,那么直接赋值:left: (图片列表的总长度 - 图片展示区的宽度)

奖励园豆:5
codingHeart | 小虾三级 |园豆:1557 | 2017-04-11 17:09

这样的话前面还是能滑动出去,我不知道要怎么控制

苏黎世宝贝 | 园豆:279 (菜鸟二级) | 2017-04-12 10:26

@苏黎世宝贝:

比如:展示区宽度为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 | 园豆:1557 (小虾三级) | 2017-04-12 10:56

@codingHeart: leftOffset表示的是什么呢

苏黎世宝贝 | 园豆:279 (菜鸟二级) | 2017-04-12 11:25

@苏黎世宝贝: 上面答案 修改了下

codingHeart | 园豆:1557 (小虾三级) | 2017-04-12 13:04

@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});
您的意思应该是这样对吧。可是还是会可以往后移

苏黎世宝贝 | 园豆:279 (菜鸟二级) | 2017-04-12 14:33

@codingHeart: 

像这一种第一张图片进去半张拖不出来,最后一张图片后面多出半张

苏黎世宝贝 | 园豆:279 (菜鸟二级) | 2017-04-12 15:02

@苏黎世宝贝: 13-5 =8  吧....

codingHeart | 园豆:1557 (小虾三级) | 2017-04-12 16:09

@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;

才算好的

苏黎世宝贝 | 园豆:279 (菜鸟二级) | 2017-04-12 16:14

@苏黎世宝贝: 好吧,任务是解决了,但问题还在,毕竟跟想的不一样,有时间梳理下代码再看看吧。

codingHeart | 园豆:1557 (小虾三级) | 2017-04-12 16:22

@苏黎世宝贝: 我也是看不出来问题在哪,拖动的思路就是这样的

codingHeart | 园豆:1557 (小虾三级) | 2017-04-12 16:28

@codingHeart: 好的,谢谢呀。

苏黎世宝贝 | 园豆:279 (菜鸟二级) | 2017-04-12 16:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册