1

我必须像这个url一样使用 jQuery / Javascript 移动图像

我用我自己的逻辑做了类似的事情。但它会在顶部或底部被切割成更小/更大的图像。或者它在底部完全移动，而在顶部不完全移动，反之亦然。

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

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

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

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

3 回答 3

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";    
    }
}
于 2012-10-31T08:12:22.377 回答
1

@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);

更新 小提琴

Avatar 被多次引用，因此无需多次遍历 DOM，尤其是在 mousemove 等不断循环的事件中多次。在函数之外对头像进行变量引用。image_height 和 window_height 也是常数，不会改变，所以也不需要每次都重新计算。如果它们有可能发生变化，则重新分配应由调整大小事件处理。

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

于 2012-12-20T16:30:24.547 回答
0

我认为这是你想要的东西 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;​
于 2012-10-31T07:10:45.053 回答