Question

我正在使用当时和现在的图片叠加脚本。它工作得非常好，除了移动设备......我整天都在努力尝试让用户体验消失，这让我疯狂！

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

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

唯一让我为此疯狂的事情是，e.preventdefault调用会阻止您在移动时垂直滚动，如果您在滚动时按下并进行图像处理。我看到的两个选项来自于特定地在X上提交此触发器，或者有一种方法来调用e.preventdefault（除了Y）。

我非常喜欢这个，但我真的很想知道是否有其他人不得不处理这类问题！

获取mousemove-X或preventDefault-Y

0 个答案: