0

mouseenterまたはmousemove上のマウスの位置に応じて、divを左または右にアニメーション化するこのjqueryの例に出くわしました。$.throttle と呼ばれる jquery クラスを使用して、ミリ秒ごとにコードを実行します。最初と最後の div 要素またはすべての div 要素の上にマウス ポインターを配置して、各要素の正確に中央に配置する新しい方法があるかどうか疑問に思っていました。要素を左また​​は右に移動します。基本的には、超えられないという制限を設けたいと思っています。例の上にマウスポインタを置くと、私が何を言っているのかがわかります ここをクリックしてくださいjsFiddle例はjquery 1.5で行われます

HTML

<div id="wrapper">
<ul id="scroll-content">
    <li class="item"><img src="http://placehold.it/100x150/09f" /></li>
    <li class="item"><img src="http://placehold.it/100x150/2f2" /></li>
    <li class="item"><img src="http://placehold.it/100x150/234" /></li>
    <li class="item"><img src="http://placehold.it/100x150/342" /></li>
    <li class="item"><img src="http://placehold.it/100x150/312" /></li>
    <li class="item"><img src="http://placehold.it/100x150/131" /></li>
    <li class="item"><img src="http://placehold.it/100x150/111" /></li>
    <li class="item"><img src="http://placehold.it/100x150/222" /></li>
    <li class="item"><img src="http://placehold.it/100x150/333" /></li>
    <li class="item"><img src="http://placehold.it/100x150/122" /></li>
</ul>

CSS:

#wrapper {
width: 100%;
height: 170px;
overflow: hidden;
background-color: red;
}
#scroll-content {
width: 1050px;
}

jquery:

$(document).ready(function() {
var wrapper = $('#wrapper'),
    content = $('#scroll-content');

wrapper.bind('mouseenter mousemove', $.throttle(200, mousemove));

function mousemove(e) {
    var wrapper_width = wrapper.outerWidth(),
        content_width = content.outerWidth();
    //calculate new left margin
    var tmp = e.pageX * (content_width - wrapper_width) / wrapper_width;

    content.stop().animate({
        'margin-left': '-' + tmp + 'px'
    }, 'fast', 'easeOutSine');
}
});
4

1 に答える 1

0

私はあなたを理解してほしい:

JS の変更:

//exaggerate mouse-x
var exmousex = (e.pageX-100) * 1.3;

//calculate new left margin 
var tmp = exmousex * (content_width - wrapper_width) / wrapper_width;

//LIMITS
if (tmp < 0) tmp = 0;
if (tmp > content_width - wrapper_width -5 ) tmp = content_width - wrapper_width  -5;

content.stop().animate({'left': -tmp}, 'fast', 'easeOutSine');

CSS の変更:

#wrapper {
    position: absolute;
    top:0;
    left:0
}
#scroll-content {
    position: relative;
}

試してください：http://jsfiddle.net/karacas/RkbP6/181/

于 2012-12-03T02:21:58.307 に答える