1

このURLとまったく同じようにjQuery/Javascriptを使用して画像を移動する必要があります

私は独自のロジックを使用してこれと同様のことを行いました。ただし、上部または下部のどちらかで小さい/大きい画像にカットされます。または、下で完全に動き、上で完全に動かない、またはその逆。

http://jsfiddle.net/N2k6M/ (全体の画像を表示するには、水平スクロール バーを移動してください。)

誰でも私に提案してください/ここで私のコードを修正して、私のマウス移動機能が完全に正常に機能し、画像の上部/下部が適切に移動するようにしてください。

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

3 に答える 3

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

更新された フィドル

アバターは複数回参照されるため、DOMを複数回トラバースする必要はありません。特に、mousemoveのような絶えず循環するイベント内で複数回参照する必要はありません。関数の外部でアバターへの変数参照を作成します。image_heightとwindow_heightも定数であり、変更されないため、毎回再計算する必要はありません。それらが変更される可能性がある場合、再割り当てはサイズ変更イベントによって処理される必要があります。

@Felixの回答のすぐ下で返信/コメントしたはずですが、まだ十分な影響力がないようです。：-/

于 2012-12-20T16:30:24.547 に答える
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 に答える
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 に答える