2

このトピックをしばらく検索しましたが、答えは目の前にあったかもしれませんが、すべてをまとめることができませんでした. 私がやろうとしているのは、セクション領域のようなカスタム スライダーのサイズを変更することです。

フレームワークとしてブートストラップを使用していますが、コンテナー内のコンテンツは絶対配置を使用しており、jQuery 独自の.draggable機能を使用して管理パネルでランダムな上/左の値が生成されるため、ここで jQuery が最適に機能します。

私はそれをできるだけ基本的なものにしたいと思っています。必要なのは数学だけだと思います。フィドルの例

var h = $(window).height();
var w = $(window).width();
var static_h = $('.static-area').height();

    if((h/w) > 800) {
        $('#main').css({'margin-top': w/1.2});
    }
    else { 
        $('#main').css({'margin-top': w/1.2, 'width':w});
        $('.static-area div').css({'width': w/2, 'left':0});  
    }

この種のソートは機能し、すべての css プロパティを上/左の幅/高さなどに分割できますが、ブラウザーのサイズ変更に合わせてコンテンツが適切に調整されるように、ここで計算を行う方法がわかりません。

ビジュアル デモFIDDLEのクイック フィドルを作成しました

ここでホイールを再作成しようとしているわけではありません。この質問は簡単です。特定の方法でそれを行うつもりはありませんが、現代の慣行では非常に一般的であると確信しているため、かなり一般的な方法です。これに対する答えを見つけるのが難しい唯一の理由は、コンテナー内のコンテンツが完全に配置され、ランダムであるためです。

要約： すべての子の幅、高さ、左、および上の値を使用して計算したいと思います。.resize()この計算方法はよくわかりませんし、それよりも少し複雑だと思いますが、それが私が求めている原理です。

追記:私は、layersliderプラグインの大ファンです。素晴らしい仕事をしてくれました。レイヤーを好きな位置にドラッグする機能が本当に好きなので、これを研究しようとしています。これはクールで、基本的に必要な.draggable()のはデータベースだけです。レスポンシブ部分についても調べてみましたが、この関数を含むjQueryは3,000行のコードです（誰かが実際にそれほど多くのコードを書いたとは信じられません.彼らのデモページを見ると、私が話していることがわかります。

アップデート：

var w = $(window).width();

    if((w) > 800) {
        //Figuring out what to do lol, but nothing for now
    }
    else { 
        // Doing this when window is under 800px
        $('.sublayer_1 div, .sublayer_1 img').css({'left': w/2, 'width': w}); 
    }

これは私が望むように機能します。もちろん、アドオンする必要がありますが、誰かがもう少し高度なものを書くのを手伝ってくれるでしょうか?

上記のコードが行っていることは、ブラウザーがウィンドウの幅を 2 ​​で割ってサイズを変更するときに、要素の左と幅を変更することです。それが機能する理由は漠然とわかりますが、頭を包み込むことはできません笑数学が嫌い。

4

1 に答える 1

1

あなたの問題がよくわかりません。サイズを変更したい要素の比率を計算し、それをその子に適用する必要があります。

ratio = newWidth / currentWidth;

Twitter Bootstrap を使用しているので、私はすぐに Fiddle で例を作成しました: http://jsfiddle.net/memel/f7eck/4/

これがあなたのために働いているかどうか教えてください。乾杯、E.

于 2013-08-20T14:20:41.157 に答える