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

JavaScript functionality to browser window resize

本文关键字：JavaScript 功能 调整 窗口大小 浏览器      更新时间：2023-09-26

我已经写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,

谢谢

富

两件事可能会对你有所帮助：

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

2）您可以"注册"一个函数，以便在窗口大小更改时调用。例子：

window.addEventListener("resize",nameOfFunction);

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

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

相关文章：