javascript - 使用 FitText.js 時出現(xiàn)奇怪的結(jié)果
當前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
使用 <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); 從這里開始，我將它應(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)上的所有文本保持一致，更不用說按比例放大或縮小了! 我最初的目標是 有誰知道是什么導(dǎo)致了這種行為？ 最佳答案 ...原因是 FtText.js(正如該元素在 GitHub 上指出的那樣)不適用于內(nèi)聯(lián)或跨度元素 - FitText.js 應(yīng)用于的元素(不是包裝器或容器!) 必須是 我通過更改 關(guān)于javascript - 使用 FitText.js 時出現(xiàn)奇怪的結(jié)果，我們在Stack Overflow上找到一個類似的問題： 該文章在 2023/8/25 0:33:54 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
