gpt4 book ai didi

javascript - Drupal 格式 Javascript 将包含在主题中

转载 作者:行者123 更新时间:2023-12-02 15:40:24 25 4
gpt4 key购买 nike

我正在尝试实现http://jsfiddle.net/mgmilcher/8R7Xx/sho/我的 Drupal 站点主页中有响应式 HTML5 视频背景,但一直不成功。我认为这与 JS 格式不正确有关。这是我尝试使用 script [] = custom.js 包含在 theme.info 文件中的自定义 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');


});
}

最佳答案

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

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

因此您的 custom.js 的内容应如下所示:

(function ($) {

$(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');


});
}

})(jQuery);

关于javascript - Drupal 格式 Javascript 将包含在主题中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32636207/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com