在ipad上使用触摸时滑动div /修改css属性
在ipad上使用触摸时滑动div /修改css属性
提问于 2012-05-29 12:16:44
我想要实现的是，当有人在ipad上的div上滑动手指时，修改div的左边距css属性。
为了解释我正在尝试做什么，我设置了这个页面：http://littleirrepressiblewonton.com/wp7/category/all/
现在，当有人点击一个缩略图时，它会加载一个水平幻灯片放映大图。其中一些图片太宽，无法放在ipad上，他们希望使用触摸来向左或向右拖动图像的水平幻灯片。
divs的设置方式如下：
<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的left -left属性以左右移动图库。
因此，如果有人在ipad上滑动300px，我需要修改div.WontonGalleryFulls的空白处-左css属性
我正在寻找一个jquery解决方案，因为网站已经在使用它了。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-06-12 09:07:59
我最终从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();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10792995
复制相关文章
相似问题
腾讯云开发者
