Question

我想要实现的是当有人在ipad上滑动div时修改div的margin-left css属性。

为了解释我正在尝试做什么，我已经设置了这个页面： http://littleirrepressiblewonton.com/wp7/category/all/

现在，当有人点击缩略图时，它会加载大图像的水平幻灯片。有些图像太宽而无法放在ipad上，他们希望使用触摸来向左或向右拖动图像的水平幻灯片。

div的设置方式如下：

<div class='WontonGalleryFullsMask'>
<div class='WontonGalleryFulls' data-animating='no'>
    <div class="WontonGalleryFullImage" data-idx="0"  ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster022/2835976114.jpg" alt="VP_test_poster022"  /></div>
    <div class="WontonGalleryFullImage" data-idx="1"  ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster021/663128145.jpg" alt="VP_test_poster021"  /></div>
    <div class="WontonGalleryFullImage" data-idx="2"  ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster020/3945564367.jpg" alt="VP_test_poster020"  /></div>
</div>
</div>

div.WontonGalleryFullsMask具有以下css并设置为掩码。

height: 523px;
overflow: hidden;
width: 100%;

然后修改div.WontonGalleryFulls div的margin-left属性以向左和向右移动图库。

所以如果有人在ipad上滑动300px，我需要修改div.WontonGalleryFulls的margin-left css属性

我正在寻找一个jquery解决方案，因为该网站已经在使用它。

Answer 1

我最终修改了http://popdevelop.com/2010/08/touching-the-web/

的脚本

$.fn.draggable = function() {


var offset = null;
  var start = function(e) {
    var orig = e.originalEvent;
    var ml = parseInt($(this).css('margin-left'));
    offset = {
      x: orig.changedTouches[0].pageX - ml //pos.left
    };
  };
  var moveMe = function(e) {
    e.preventDefault();
    var orig = e.originalEvent;
    $(this).css({
      'margin-left': orig.changedTouches[0].pageX - offset.x
    });
  };
  this.bind("touchstart", start);
  this.bind("touchmove", moveMe);
};

$('div.WontonGalleryFulls').css('position', 'absolute');
$('div.WontonGalleryFulls').draggable();

在ipad上使用触摸时滑动div /修改css属性

1 个答案: