0

beforeAfter ( http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/ ) と呼ばれるプラグインを使用していますが、それを実装する方法は、ユーザーが580pxの画面を使用しています。これで開発コードができましたが、これにメディアクエリを追加する方法がわかりません。

完全なコードへのリンクは 次のとおりですhttp://jsbin.com/ojuwid/1/

そして、メディアクエリに組み込む必要があるプラグインファイルのスニペットは次のとおりです。

// When clicking in the container, move the bar and imageholder divs
                $(obj).click(function(e){
                    var clickX = e.pageX - $(this).offset().left;
                    $('#dragwrapper'+randID).stop().animate({'left':clickX-($('#dragwrapper'+randID).width()/2)+'px'},o.clickSpeed);
                    $('div:eq(2)', obj).stop().animate({'width':clickX+'px'},o.clickSpeed);
                    $('#lt-arrow'+randID+',#rt-arrow'+randID).stop().animate({opacity:0},50);
                });
                $(obj).one('mousemove', function(){$('#dragwrapper'+randID).stop().animate({'opacity':1},500);}); 

// If the mouse is over the container and we animate the intro, we run this to change the opacity when the mouse moves since the hover event doesnt get triggered yet
                }
            });

誰かがこれをどのように行うかについての考えや方法を持っているなら、それは素晴らしいことです! PS-メディア クエリが CSS の概念であることは知っていますが、ウィンドウ サイズ変更クエリをこのプラグインにトリガーする方法がわかりません。

4

3 に答える 3

2

のような条件を追加できますif($(window).width() <= 580)か？

コードは次のようになります。

    // When clicking in the container, move the bar and imageholder divs
                    $(obj).click(function(e){
                        if($(window).width() <= 580) { //added this line
                            var clickX = e.pageX - $(this).offset().left;
                            $('#dragwrapper'+randID).stop().animate({'left':clickX-($('#dragwrapper'+randID).width()/2)+'px'},o.clickSpeed);
                            $('div:eq(2)', obj).stop().animate({'width':clickX+'px'},o.clickSpeed);
                            $('#lt-arrow'+randID+',#rt-arrow'+randID).stop().animate({opacity:0},50);
                        } //added this line too
                    });
                    $(obj).one('mousemove', function(){$('#dragwrapper'+randID).stop().animate({'opacity':1},500);}); 

    // If the mouse is over the container and we animate the intro, we run this to change the opacity when the mouse moves since the hover event doesnt get triggered yet
                    }
                });
于 2013-07-26T13:49:15.137 に答える
1

mediaQuery である必要がありますか? イベントをバインドする前に、js を介してウィンドウのサイズを確認するだけではどうですか?

if(window.screen.width <= 580) {
    //...bind the event
}
于 2013-07-26T13:29:23.677 に答える