jquery - 当屏幕宽度达到 500 像素时，如何更改此代码以进行切换？

Question

<script>
try {
    jQuery(function() {
        jQuery('#video1').VideoPlayer({
            theme: '-vid-skin'              
        });

        $("a.video-link, #video-overlay-shadow").bind("click", function() {
            $("#video-overlay-shadow, #ms-video-overlay").fadeToggle("slow", "linear");
            if($(".Vid-play-button").hasClass("Vid-paused-button")) $(".Vid-play-button").trigger("click");
        });
    });
} catch (e) {
    console.log(lel);
}

</script>

如何修改这段代码，以便在屏幕宽度达到 500px 时触发？

Answer 1

使用 jQuery 的resize事件。请参阅文档。

例如：

$(window).resize(
    function() {
        if ($(window).width() >= 500) {
            // Do something...
        }
    }
);

当然，您应该考虑在初始触发后窗口变得比 500 像素更宽或更窄的可能情况。

---

如果您需要在窗口宽度超过 500 像素时只触发一次，您需要以某种方式检查它。例如，您可以使用该data方法指示窗口已经超过 500px：

$(window).resize(
    function() {
         // Window just went over 500 for the first time
        if ($(window).width() >= 500 && !$(window).data('already_over_500')) {
            $(window).data('already_over_500'); // Set a flag for the first time
            // Do something...

         // Window just went below 500
        } else if ($(window).width() < 500) {
            $(window).data('already_over_500',''); // Unset the flag
            // Do something else...
        }
    }
);

Answer 2

尝试这个：

$(window).on('resize', function(){
  if($(window).width() >= 500){
    // your code
  }
});