0

私が達成しようとしているのは、誰かがiPadでdivを横切って指をスライドさせたときに、divのmargin-leftcssプロパティを変更することです。

私がやろうとしていることを説明するために、私はこのページを設定しました：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-leftcssプロパティを変更する必要があります。

サイトですでに使用されているjqueryソリューションを探しています。

4

1 に答える 1

0

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();
于 2012-06-12T01:07:58.923 に答える