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事件。请参阅documentation。

例如：

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

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

如果您需要在窗口宽度超过500px时触发一次，则需要以某种方式检查。例如，您可以使用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
  }
});

当屏幕宽度达到500px时，如何更改此代码以切换？

2 个答案: