Jquery 获取mousemove-X或prevent-Y

我正在编写一个当时和现在的图像覆盖脚本。它的工作非常好，除了在手机上。。。。我已经工作了一整天，试图获得用户体验，这让我发疯

我构建了一个非常简单的脚本，可以让你在图像上移动鼠标或手指，以查看图像下方的图像[下面的完整代码]

<style type="text/css">
    .trackMe img.packard {
        width:100% !important;
        top:0 !important;
        left:0 !important;
        position:absolute;
        margin:0 !important;
    }

    .trackMe img.now{
        width:100% !important;
        margin:0 !important;
    }
</style>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript" language="JavaScript">

$(document).ready(function() {
    var xpos = '';
    var ypos = '';
    $('.trackMe').each(function(){
        $(this).children("img:last").on("mousemove touchmove", function(e) {
            var currentY = e.originalEvent.touches ?  e.originalEvent.touches[0].pageY : e.pageY;
            var currentX = e.originalEvent.touches ?  e.originalEvent.touches[0].pageX : e.pageX;

            e.preventDefault();

            var offset = $(this).offset();
            var xpos = (currentX - offset.left);
            //now to get the first child image width..
            var thisImage = $(this);
            var thisWidth = thisImage.width();
            var pct = Math.round((xpos/thisWidth)*100)/100;
            var ipct = Math.abs(Math.round(((xpos-thisWidth)/thisWidth)*100)/100);
            thisImage.css({ 'opacity' : ipct });
        });
    });
});

</script>

<div style="position:relative; min-width:320px; height:auto; overflow:hidden;" class="trackMe">
    <img src="1a.jpg" class="now" />
    <img src="1b.jpg" class="packard" />
</div>

.trackMe img.packard{
宽度：100%！重要；
顶部：0！重要；
左：0！重要；
位置：绝对位置；
边距：0！重要；
}
.立即跟踪我{
宽度：100%！重要；
边距：0！重要；
}
$（文档）.ready（函数（）{
var xpos=''；
var-ypos=''；
$（'.trackMe'）。每个（函数（）{
$（this）.children（“img:last”）.on（“mousemove touchmove”，函数（e）{
var currentY=e.originalEvent.touchs？e.originalEvent.touchs[0]。pageY:e.pageY；
var currentX=e.originalEvent.touchs？e.originalEvent.touchs[0]。pageX:e.pageX；
e、 预防默认值（）；
var offset=$（this.offset（）；
var xpos=（currentX-offset.left）；
//现在获取第一个子图像宽度。。
var thisImage=$（此）；
var thisWidth=thisImage.width（）；
var pct=数学圆（（xpos/thisWidth）*100）/100；
var ipct=Math.abs（数学圆整（（xpos thiswith）/thiswith）*100）/100）；
css（{'opacity'：ipct}）；
});
});
});

唯一让我为之疯狂的是，e.preventdefault可以阻止在移动设备上垂直滚动，如果你在滚动时按和image。我看到的这两个选项要么是在X上提交这个触发器，要么是调用e.preventdefault（Y除外）

---

我对这件事很感兴趣，但我真的很想知道是否有其他人必须处理这类问题

有滚动条吗？用户应该滚动吗？用户应该在页面上垂直滚动。该页面是20多个运行then/now脚本的图像的列表。问题是，由于它在滚动图像时阻止了默认操作，因此用户很难向下滚动到其余图像。这就是为什么我想只捕获hotizontal鼠标/触摸事件，或者通过Y（垂直）动作（在移动设备上滚动）来阻止默认的一切。