上的MouseEnter

使不斷擴大的文字，我想作出擴大菜單文字就像這個網頁：example 上的MouseEnter

下面是我的JavaScript代碼工作，但不是我想要的。問題是這種類型的代碼非常長，不專業且沒有響應。例如：如果我降低屏幕分辨率，則大部分字母會擴展出屏幕。

我做了每個字母將在一個單獨的div元素。

問題：也許有把所有的「div的」到數組，並使其通過擴大父系DIV寬度的選項（在這種情況下，「NavPersonalBlog」）？

感謝您的答案和我的英語水平:)

$(".NavPersonalBlog").on("mouseenter", function() { 
    $(".charTopP").animate({ 
    right: '36%' 
    }, 500); 
    $(".charTopE").animate({ 
    right: '28%' 
    }, 500); 
    $(".charTopR").animate({ 
    right: '22%' 
    }, 500); 
    $(".charTopS").animate({ 
    right: '16%' 
    }, 500); 
    $(".charTopO").animate({ 
    right: '8%' 
    }, 500); 
    $(".charTopN").animate({ 
    right: '2%' 
    }, 500); 
    $(".charTopA").animate({ 
    right: '-2%' 
    }, 500); 
    $(".charTopL").animate({ 
    right: '-8%' 
    }, 500); 
    $(".charTopB").animate({ 
    right: '-16%' 
    }, 500); 
    $(".charTopL2").animate({ 
    right: '-22%' 
    }, 500); 
    $(".charTopO2").animate({ 
    right: '-28%' 
    }, 500); 
    $(".charTopG").animate({ 
    right: '-36%' 
    }, 500); 
}); 
$(".NavPersonalBlog").on("mouseleave", function() { 
    $(".charTopP, .charTopE, .charTopR, .charTopS, .charTopO, .charTopN, 
    .charTopA, .charTopL, .charTopB, .charTopL2, .charTopO2, 
    .charTopG ").stop(true, true).animate({ 
    right: 0 
    }, 500); 
});

來源

2017-06-12 EimisB

提供的答案很棒，但它們吸引了我的設計眼球：它們不是，正好是居中。在接受的答案中注意，中心位於D和I之間，並且在「SAMPLE」的答案中，P是中心。下面的代碼會給你一個更好的中心，但它確實帶有更多的結構（額外的HTML）和設置。

div { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
span { 
 
    text-align: center; 
 
    flex: 1; 
 
    transition: all 1s ease-in-out 0s; 
 
    max-width: 3%; 
 
} 
 

 
div:hover span { 
 
    max-width: 7%; 
 
}

<div> 
 
    <span>H</span> 
 
    <span>E</span> 
 
    <span>A</span> 
 
    <span>D</span> 
 
    <span>I</span> 
 
    <span>N</span> 
 
    <span>G</span> 
 
</div>

來源

2017-06-13 13:04:42 chazsolo

這遠遠斑點！ –

這甚至更好，因爲這種類型的代碼使得文本響應，因爲百分比的最大寬度。謝謝。 – EimisB

抱歉，沒有必要在這裏和jQuery代碼 - 甚至是JS。您可以使用CSS transition上letter-spacing達到的效果：

div { 
 
    font: bold 2em arial; 
 
    text-align: center; 
 
    transition: letter-spacing 0.5s; 
 
} 
 
div:hover { 
 
    letter-spacing: 2em; 
 
}

<div>HEADING</div>

來源

2017-06-12 12:46:16

的CSS letter-spacing屬性將（主要是）你想要做什麼。

但是@chazsolo在他的回答中正確指出，這種技術並不完全居中。如我在這裏所做的那樣，在字符串的開始處添加一個非分隔空間會有所幫助，通過在分隔符之間添加另一個字符來實現字母間距 - 但即使這樣仍然會導致間距基於字符，而不是字符寬度。（不太明顯，它當然也會將無遮蓋的字符串的居中偏移一半。）請注意，X保持固定，因爲每邊有三個字母，即使這些字母的寬度儘可能不同：

div { 
 
    text-align:center; 
 
    transition: letter-spacing 1s; 
 
} 
 

 
div:hover { 
 
    letter-spacing: 20px 
 
}

<div>SAMPLE</div> 
 
<div>&nbsp;MMMXIII</div>

這種方式很簡單，可能是足夠接近，但如果精度很重要順應chazsolo的答案。

來源

2017-06-12 12:46:36

回答

相關問題