Question

我必须使用jquery / javascript移动图像，就像这个url

一样

我使用自己的逻辑完成了similar to this。但它会在顶部或底部切割出较小/较大的图像。或者它完全在底部移动，并且不会完全在顶部移动，反之亦然。

http://jsfiddle.net/N2k6M/ （请移动水平滚动条以查看完整图像。）

任何人都可以在这里建议我/修复我的代码，以便我的鼠标移动功能完美无缺，图像的上/下部分可以正常移动。

我需要像原始网址一样无缝移动图像。

HTML PART

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

<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";    
    }
}

Answer 2

@Felix的回答非常好并且运作良好，但它的工作量超出了必要的范围。每个调用都有一些常量不需要重新分配。通过在updateAvatarPosition函数之外设置这些，可以提高性能。

var avatar = $('#avatar');
    img_height = avatar.height(),
    window_height = $(window).height();

function updateAvatarPosition( e )
{
    var factor = (img_height - window_height) / window_height,
        yheight = parseInt(e.clientY);

    if (factor < 1) {
        factor = 1;
    }

    avatar.css('top', -(yheight * factor));
}

avatar.on('mousemove', updateAvatarPosition);

Updated Fiddle

Avatar不止一次被引用，因此不需要多次遍历DOM，尤其是在像mousemove这样的持续循环事件中多次遍历DOM。对函数外部的头像进行变量引用。 image_height和window_height也是常量，不会改变，因此不需要每次都重新计算它们。如果他们有可能改变，重新分配应该由resize事件处理。

本来会在@Felix的答案下直接回复/评论，但显然还没有足够的影响力。： - /

Answer 3

我认为这是你想要的 http://jsfiddle.net/N2k6M/6/

var doc_height = $(document).height();
function updateAvatarPosition( e )
{
    var avatar = document.getElementById("avatar");
    var yheight = parseInt(e.clientY);
    var ywidth = e.clientX;

    if((yheight)<(doc_height)){        
        yheight*=2;
        avatar.style.top = '-'+(yheight) + "px";
    }
    /*if((ywidth)<(doc_height/6)){
        avatar.style.top = '-'+e.x + "px";
    }*/    
}

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

鼠标移动时的图像移动问题（方向相反）

3 个答案: