一男一女下面一进一出性视频,国产精品视频福利一区二区,国产亚洲欧洲精品

javascript - 使用 FitText.js 時出現(xiàn)奇怪的結(jié)果

當(dāng)前位置：點(diǎn)晴教程→知識管理交流 →『技術(shù)文檔交流』

admin

2023年8月25日 0:33 本文熱度 529

使用 FitText.js 遇到一些問題- 我正在我的 <head> 中觸發(fā)腳本使用以下代碼(我已包含所有內(nèi)容以供引用，計(jì)劃是在完成設(shè)計(jì)和代碼布局后將其最小化)：

<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>

主要的興趣點(diǎn)大概有以下幾點(diǎn)：

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

從這里開始，我將它應(yīng)用于兩個元素，它們在我的 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>

現(xiàn)在，我的理解是它們應(yīng)該隨其父元素縮放 - 然而有些事情發(fā)生了，我無法弄清楚它是什么!您可以看看這里發(fā)生了什么(在調(diào)整大小時最明顯)- http://jameshenry.info/test/test.php

我嘗試了幾種不同的方法，但似乎無法使翻轉(zhuǎn)上的所有文本保持一致，更不用說按比例放大或縮小了!

我最初的目標(biāo)是 .fittext1和 .fittext2使用 #ID 但由于多個實(shí)例而切換到類的元素，但是在兩者之間切換并不能解決問題。

有誰知道是什么導(dǎo)致了這種行為？

最佳答案

...原因是 FtText.js(正如該元素在 GitHub 上指出的那樣)不適用于內(nèi)聯(lián)或跨度元素 - FitText.js 應(yīng)用于的元素(不是包裝器或容器!) 必須是 absolute , block或 inline-block

我通過更改 <h5> 解決了這個問題和 <h6 > 要顯示的標(biāo)簽:inline-block;

關(guān)于javascript - 使用 FitText.js 時出現(xiàn)奇怪的結(jié)果，我們在Stack Overflow上找到一個類似的問題：

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

該文章在 2023/8/25 0:33:54 編輯過

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉儲管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

javascript - 使用 FitText.js 時出現(xiàn)奇怪的結(jié)果