javascript - 使用 FitText.js 时出现奇怪的结果

admin

2023年8月25日 0:33 本文热度 408

使用 FitText.js 遇到一些问题- 我正在我的 <head> 中触发脚本使用以下代码(我已包含所有内容以供引用，计划是在完成设计和代码布局后将其最小化)：

<script type="text/javascript">
            $(document).ready(function() {
 
            var $container = $('#thumbnail-array');
 
                $container.imagesLoaded(function() {
                    $container.masonry({
                        itemselector: '.video-thumbnail',
                        columnWidth: '.grid-sizer',
                        gutter: '.gutter-sizer',
                        percentPosition: true
                    });
                });
            });
 
            jQuery(document).ready(function() {
                jQuery('.mobile-close').click(function(e) {
                    jQuery(this).toggleClass('active');
                    jQuery('.mobile-nav').toggleClass('active');
 
                    e.preventDefault();
                });
                jQuery('.dropdown').click(function(e) {
                    jQuery(this).toggleClass('active');
                    jQuery('.mobile-nav').toggleClass('active');
 
                    e.preventDefault();
                });
                $(".fittext1").fitText(1.1);
                $(".fittext2").fitText(0.75);
            });
 
            $(document).ready(function() {
                $('.overlay').hover(function(){
                    $(this).parent().find('video').get(0).play();
                }, function() {
                    var video = $(this).parent().find('video').get(0);
                    video.pause();
                    video.currentTime = 0;
                });
            });
</script>

主要的兴趣点大概有以下几点：

$(".fittext1").fitText(1.1);
$(".fittext2").fitText(0.75);

从这里开始，我将它应用于两个元素，它们在我的 CSS 中定义如下：

h5 {
    display:inline;
    font-size: 2em;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
 
h6 {
    display:inline;
    font-size: 0.75em;
    letter-spacing: 0.3em;
    padding-top: 0px;
    margin-top: 0px;
    font-weight: 100;
}

然后像这样在我的 HTML 中引用：

<h5 class="fittext1">Title</h5>
<hr>
<h6 class="fittext2">Subtitle</h6>

现在，我的理解是它们应该随其父元素缩放 - 然而有些事情发生了，我无法弄清楚它是什么!您可以看看这里发生了什么(在调整大小时最明显)- http://jameshenry.info/test/test.php

我尝试了几种不同的方法，但似乎无法使翻转上的所有文本保持一致，更不用说按比例放大或缩小了!

我最初的目标是 .fittext1和 .fittext2使用 #ID 但由于多个实例而切换到类的元素，但是在两者之间切换并不能解决问题。

有谁知道是什么导致了这种行为？

最佳答案

...原因是 FtText.js(正如该元素在 GitHub 上指出的那样)不适用于内联或跨度元素 - FitText.js 应用于的元素(不是包装器或容器!) 必须是 absolute , block或 inline-block

我通过更改 <h5> 解决了这个问题和 <h6 > 要显示的标签:inline-block;

关于javascript - 使用 FitText.js 时出现奇怪的结果，我们在Stack Overflow上找到一个类似的问题：

https://stackoverflow.com/questions/32904125/

该文章在 2023/8/25 0:33:54 编辑过

关键字查询

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。