0

として整理された画像ギャラリーを取得しました<ul>。すべての画像は<li>要素内にあり、それらの画像の 1 つにマウスを移動すると、ユーザーに視覚的なフィードバックを提供するために拡大する必要があります。animate() を使用して画像のサイズを変更すると、サイズ変更された画像がより多くのスペースを使用するため、他の画像が横に押し出されます。

したがって、画像要素のクローンを作成し、元の画像の上に浮かせてから、アニメーションを呼び出しました。これには、複製された画像がポップアップするとすぐに onMouseOut() が呼び出されるという問題が伴います。そのため、ネストされた hover() 関数が必要であり、これが複雑になった場所です。

2 つのエラーが発生しましたが、その原因がわかりません。最初のものは、 animate() が複製された画像を元の右の境界線を超えて拡大させないことです.2つ目は、マウスをギャラリー上ですばやく移動すると、奇妙な拡大/縮小動作が発生することです.

html:

<ul id="gallery1" class="gallery_container">
    <li class="frame">
    <a href=""><img src="pic1.jpg" class="picture" /></a></li><li class="frame">
    <a href=""><img src="pic2.jpg" class="picture" /></a></li><li class="frame">
    <a href=""><img src="pic3.jpg" class="picture" /></a></li>
</ul>

CSS:

.picture
{
    height: 200px;
    border: 0px;
    margin: 0px;
    padding: 0px;
}

.frame
{
    display: inline-block;
    position: relative;
    margin: 0px;
    margin-right:8px;
    padding: 0px;
}

.frame a
{
    padding: 0px;
    margin: 0px;
} 

.gallery_container
{
    height: 200px;
    width: 150%;
    position: relative;
    top: 4px;
    padding: 0px;
    margin: 0px;
}

そして最後に、私にそれらの頭痛の種を与えているコード:

$(document).ready(function()
{
var zooming = false;
var zoom = 4;
var speed_zoom = 100;

$('.gallery_container li a').hover(function(element)
{
    // disable zooming to prevent unwanted behavior
    if(zooming) return;

    zooming = true;

    $(this).after( $(this).clone(false) );
    $(this).next().attr('id', 'focus_frame');
},
function(element) // when the new element pops up, onmouseout is triggered, since the focus_frame is in front of the image
{
    $(this).next().hover(function(element)
    {
        // we need to re-position the element in the dom-tree, since it needs to grow out of a container with overflow: hidden
        $('#focus_frame img').animate({'left' : zoom * -1, 'top' : zoom * -1, 'height' : 200+(zoom*2), 'width' : $('#focus_frame img').outerWidth() + (zoom*2)}, speed_zoom);
    },
    function(element)
    {
        $(this).remove();
        zooming = false;
    });
});
});
4

1 に答える 1

1 
var $doc=$(document.body)
$doc.on({
"mouseenter" : function (e) {

    $doc.find("> .gallery_clone").remove();

    var $i=$(this).parent();
    $i.pos = $i.offset();
    $i.clone()
        .addClass("gallery_clone "+$i.parent().parent().attr("class"))
        .css({
            top:(Math.round($i.pos.top)-3)+"px"
            ,left:(Math.round($i.pos.left)-3)+"px"
            ,width:$i.width()
            }).appendTo($doc);

    }
},
  " ul > li > img"
).on ({

    "mouseleave" : function (e) {
       $(this).remove();
    },"> .gallery_clone");

CSS.gallery_cloneではposition:absolute

次に.gallery_clone:hover、css を介してアニメーション化しますが、.gallery_clone edit に mouseenter イベントを追加して、jquery でも実行できます。スクリプトから文字通りコピー/貼り付けしたので、このコードを html に適合させる必要があります。

注意: css anim を試してみてください。古いものではアニメーション化されなくても、価値があります。(また、同じギャラリーのライトボックス効果をほぼ純粋な css にしました - 後で公開します。今はプラグインのリリースの準備ができていません)

nb2：その部分"+$i.parent().parent().attr("class")は、cmsでギャラリーの背景色を選択できるため、そのクラスを背景色と他のギャラリースタイルをクローンに追加するためです（つまり、必要ありません）

于 2013-02-03T16:03:38.680 に答える