Question

所以我有这个视频标签，位置固定的休闲视频标签，顶部和左侧都设置为0px。

我有这个小脚本：

   $(document).ready(function() {
         $('#bgvideo').on("loadedmetadata", scaleVid);
            $(window).resize(function() {
                scaleVid();
            })

            function scaleVid(){
                if($(window).width()/$(window).height() > 1.7777777){

                    $('#bgvideo').css({
                        'width':$(window).width()
                    })
                }
                else
                    $('#bgvideo').css({
                        'height':$(window).height()
                    })
            }

        });

问题在于：当我只调整一次或两次时，它会起作用。但是当我快速调整大小并且只是玩窗口大小时，它就会出错。视频资源是16：9，因此1.77777（我希望它保持比例）

Answer 1

调整大小事件可能比你想要的更多......

在您拖动时多次触发的某些浏览器中

可能是调整大小事件错误：

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

你可以尝试用保加利亚爱尔兰调整大小事件的polyfill：

    (function($,sr){

      // debouncing function from John Hann
      // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
      var debounce = function (func, threshold, execAsap) {
          var timeout;

          return function debounced () {
              var obj = this, args = arguments;
              function delayed () {
                  if (!execAsap)
                      func.apply(obj, args);
                  timeout = null;
              };

              if (timeout)
                  clearTimeout(timeout);
              else if (execAsap)
                  func.apply(obj, args);

              timeout = setTimeout(delayed, threshold || 100);
          };
      }
      // smartresize 
      jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');

然后像这样使用：

// usage:
$(window).smartresize(function(){
     // code goes here
     scaleVid();
});

使用它的好演示：

<强> http://www.paulirish.com/demo/resize

视频作为背景 - 多个调整大小错误

1 个答案: