0

私はしばらく HTML と CSS を書いていますが、JavaScript ドメインは初めてです。以下のコードを使用して、jQuery スライダーの属性を制御しています。コードは問題なく動作しますが、ブラウザー画面のサイズが変更される (またはモバイル デバイスに読み込まれる) ときにコード内の要素の一部を変更して、小さな画面でも機能が正しく動作するようにする必要があります。

 $(document).ready(
        function() {
            $(".container").wtListRotator({
                screen_width:534,
                screen_height:300,
                item_width:210,
                item_height:75,
                item_display:4,
                list_align:"left",
                scroll_type:"mouse_move",
                auto_start:true,
                delay:5000,
                transition:"v.slide",
                transition_speed:800,
                easing:"",
                auto_center:true,
                display_playbutton:false,
                display_number:false,
                display_timer: false,
                display_arrow:true,
                display_thumbs:true,
                display_scrollbar:true,
                mouseover_select:false,
                pause_mouseover: true,
                cpanel_mouseover:false,                 
                text_mouseover:false,
                text_effect:"fade",
                text_sync:true,
                cpanel_align:"TR",
                timer_align:"bottom",
                move_one:false,
                auto_adjust:true,
                shuffle:false,
                play_once:false,
                mousewheel_scroll:true,                 
                block_size:75,
                vert_size:50,
                horz_size:50,
                block_delay:35,
                vstripe_delay:90,
                hstripe_delay:180                   
            });
        }
    );

私はすでに CSS の要素にメディア クエリを実装しているので、サイズが変更され、サイトの残りの部分でも変更されますが、画面サイズ/サイズ変更イベントが発生したときに以下の属性を変更し、上記の JavaScript でこれを定義するのに苦労しています。 .

screen_width:534,
                screen_height:300,
                item_width:210,
                item_height:75,
                item_display:4,

ありがとう

リッチ

4

1 に答える 1

0

あなたを助けるかもしれない2つのこと：

window.innerWidth1) と を使用して、ブラウザ ウィンドウの現在使用可能な幅/高さをいつでも取得できますwindow.innerHeight。

2）ウィンドウのサイズが変更されるたびに呼び出される関数を「登録」できます。例:

window.addEventListener("resize",nameOfFunction);

window.onresize = function() { //do stuff };

他にご不明な点がございましたら、お気軽にお問い合わせください...

于 2012-06-19T23:18:32.913 に答える