Question

我已经写了一段时间的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,

由于

富

Answer 1

可能对您有所帮助的两件事：

1）您始终可以使用window.innerWidth和window.innerHeight获取浏览器窗口的当前可用宽度/高度。

2）只要窗口大小发生变化，您就可以“注册”要调用的函数。例子：

window.addEventListener("resize",nameOfFunction);

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

如果您有其他问题，我很乐意提供帮助......

浏览器窗口的JavaScript功能调整大小

1 个答案: