Question

我想在此网页中制作一个展开式菜单文字：example

下面是我的JavaScript代码，但不是我想要的。问题是这种类型的代码很长，不专业且没有响应。例如：如果我降低屏幕分辨率，大多数字母会从屏幕中扩展出来。

我认为每个字母都在一个单独的div元素中。

问题：也许有一个选项可以把所有的＆＃39; s＆＃39;进入数组并使其扩展为父节点宽度（在这种情况下＆＃39; NavPersonalBlog＆＃39;）？

感谢您的回答，对不起我的英语：）

$(".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);
});

Answer 1

这里不需要和jQuery代码 - 甚至JS。您可以使用transition上的CSS letter-spacing来实现效果：

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

<div>HEADING</div>

Answer 2

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的答案。

Answer 3

提供的答案很棒，但他们抓住了我的设计眼睛：他们并非完全居中。请注意，在接受的答案中，中心位于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>

在mouseEnter

3 个答案: