jQuery文本大小调整插件仅适用于Bootstrap Carousel的第一张幻灯片-Java 学习之路

我正在使用一个名为WideText的轻量级jQuery插件来调整Bootstrap 3轮播幻灯片上的字幕大小 .

它通过添加具有计算字体大小的样式，使文本（span class =“responsive”）适合包含div的整个宽度 .

页面加载时，第一张幻灯片的 Headers 应用了字体大小样式 . 但是当下一张幻灯片进入时，不会应用字体大小样式 .

这是a picture of the first slide and then the next slide（我没有足够的信心在这里发布图片） .

我找到了similar issue on Stack Overflow for a different plugin，其中的想法是在活动幻灯片之后找到下一个项目并调用插件 . 但我无法使该解决方案奏效 .

如何将WideText插件应用于轮播中的所有 Headers ，以便在每个图像滑入时显示？

这是插件的实际代码：

(function($) {
  $.fn.wideText = function() {
    return this.each( function() {
        // Add "wtext" class to each element and then set up the magic
        var obj = $(this),
            rtext = obj.addClass( 'wtext' );
        // Work that magic each time the browser is resized
        $(window).on( 'resize', function() {
            obj.css( {'fontSize': parseInt( obj.css('fontSize')) * ( obj.parent().width() / obj.width() ) + 'px', 'visibility' : 'visible' } );
        } ).resize();
    });
  };
} )(jQuery);

这是放在我页面底部的代码：

$(window).load( function() {
    $( '.responsive' ).wideText();
} );

谢谢 .

1 回答

好的，经过Jquery专业人员的一些故障排除后，我们想出了这些额外的代码 .

// auto type width adjustment in #primary-carousel images   
$(window).load( function() {
    $( 'h1 span.responsive' ).wideText();
} );

// hack for invisible carousel wideText timing problem 
// boostrap carousel sends an event "slide.bs.carousel" when it begins to slide
$('#primary-carousel').on("slide.bs.carousel", function(){
    setTimeout(function(){
        $(window).trigger('resize');
    }, 40); 
})

回复于 2024-04-29T03:38:43+08:00

jQuery文本大小调整插件仅适用于Bootstrap Carousel的第一张幻灯片

1 回答

相关问题