Question

我正在尝试在Drupal网站主页中实施http://jsfiddle.net/mgmilcher/8R7Xx/sho/响应式HTML5视频背景，但未成功。我认为它与JS没有正确格式化有关。这是我试图在我的theme.info文件中包含的自定义JS，使用script [] = custom.js。

格式化这种格式的正确方法是什么？目前处理的所有内容都没有显示出来。

jQuery(document).ready(function ($) {

    // Resive video
    scaleVideoContainer();

    initBannerVideoSize('.video-container .poster img');
    initBannerVideoSize('.video-container .filter');
    initBannerVideoSize('.video-container video');

    $(window).on('resize', function() {
        scaleVideoContainer();
        scaleBannerVideoSize('.video-container .poster img');
        scaleBannerVideoSize('.video-container .filter');
        scaleBannerVideoSize('.video-container video');
    });

});

/** Reusable Functions **/
/********************************************************************/

function scaleVideoContainer() {

    var height = $(window).height();
    var unitHeight = parseInt(height) + 'px';
    $('.homepage-hero-module').css('height',unitHeight);

}

function initBannerVideoSize(element){

    $(element).each(function(){
        $(this).data('height', $(this).height());
        $(this).data('width', $(this).width());
    });

    scaleBannerVideoSize(element);

}

function scaleBannerVideoSize(element){

    var windowWidth = $(window).width(),
        windowHeight = $(window).height(),
        videoWidth,
        videoHeight;

    console.log(windowHeight);

    $(element).each(function(){
        var videoAspectRatio = $(this).data('height')/$(this).data('width'),
            windowAspectRatio = windowHeight/windowWidth;

        if (videoAspectRatio > windowAspectRatio) {
            videoWidth = windowWidth;
            videoHeight = videoWidth * videoAspectRatio;
            $(this).css({'top' : -(videoHeight - windowHeight) / 2 + 'px', 'margin-left' : 0});
        } else {
            videoHeight = windowHeight;
            videoWidth = videoHeight / videoAspectRatio;
            $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
        }

        $(this).width(videoWidth).height(videoHeight);

        $('.homepage-hero-module .video-container video').addClass('fadeIn animated');


    });
}

Answer 1

您需要将所有js代码包装在

中

SELECT * FROM Table
WHERE
    Place != 'I'
    AND (
        (Country = 'CN' AND Code != 'R')
        OR
        (Country = 'JP' AND Reason != 'Z')
    )

因此，custom.js的内容应如下所示：

(function ($) {
  ...
})(jQuery);

Drupal格式Javascript将包含在主题

1 个答案: