javascript - 鼠标移动时的图像移动问题(相反方向)

Question

我必须完全像这样使用 jQuery/Javascript 移动图像 url

我已经完成了similar to this用我自己的逻辑。但是它会在顶部或底部被切割成更小/更大的图像。或者它完全在底部移动而在顶部不完全移动，反之亦然。

http://jsfiddle.net/N2k6M/(请移动水平滚动条查看全图。)

任何人都可以建议我/在这里修复我的代码，以便我的 mousemove 功能完美运行并且图像的上/下部分可以正确移动。

我需要图像的无缝移动，就像在原始 url 中一样。

HTML 部分

<div id="oheight" style="z-index:1000;position:absolute;">123</div> , <div id="yheight" style="z-index:1000;position:absolute;">123</div>

    <img id="avatar" src="http://chaikenclothing.com/wp-content/uploads/2012/05/11.jpg![enter image description here][2]" style="position:absolute;overflow:hidden;" />

JavaScript 部分

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script lang="javascript">
var doc_height = $(document).height();
function updateAvatarPosition( e )
{
    var avatar = document.getElementById("avatar");
    var yheight = parseInt(e.y);
    var ywidth = e.x;
    //avatar.style.left = e.x + "px";
    
    
    if((yheight)<(doc_height)){     
        yheight*=2;
        avatar.style.top = '-'+(yheight) + "px";
    }
    console.log(yheight);
    $("#oheight").html(doc_height);
    $("#yheight").html(yheight);
    /*if((ywidth)<(doc_height/6)){
        avatar.style.top = '-'+e.x + "px";
    }*/ 
}

document.getElementById("avatar").onmousemove = updateAvatarPosition;


</script>

Answer 1

参见 http://jsfiddle.net/N2k6M/7/

function updateAvatarPosition( e )
{
    var img_height = $('#avatar').height();
    var window_height = $(window).height();
    var factor = (img_height - window_height) / window_height;
    if(factor > 1) {
        var avatar = document.getElementById("avatar");
        var yheight = parseInt(e.clientY);
        avatar.style.top = '-'+(yheight * factor) + "px";    
    }
}