指定单词第一个字母的宽度

Assign Width of First Letter of Word

本文关键字：单词 第一个      更新时间：2024-02-25

我正在尝试设置一个插件，它运行得很好，但我注意到第一个字符（first中的F）在页面加载时没有被分配正确的宽度。这个插件允许你鼠标悬停，它会变成第二个单词，然后在鼠标悬停时，它会变回第一个单词&则第一个字符的宽度是正确的。所以我试着在它第一次显示时修复它：

var firstltrwdraw = $('span.char1').width(); // this width is actually 39px but it keeps pulling 27
 console.log('1st Width Raw: ' + firstltrwdraw);
var firstltrwd = parseFloat(firstltrwdraw);
  console.log('1st Width: ' + firstltrwd);
  console.log('1st Type: ' + typeof firstltrwd);
$('span.char1').parent().css({'width': firstltrwd + 'px'});

这是一些典型的。html:

<div class="lslide_wrap">
  <a href="javascript:void(0)" ...>
    <span class="sl-wrapper" ...>
      <span class="char1 sl-w2" ...>S</span> // first letter of Second
      <span class="char1 sl-w1" ...>F</span> // first letter of First
    </span>
    <span class="sl-wrapper" ...>
     ... // second letter of each word, etc
     ...
    <span>
  </a>
</div>

这是一个演示页面：http://www.partiproductions.com/letterslide_test/index.html

当然，如果能从char1中获得宽度并将其分配给其父sl包装器，我们将不胜感激。

谢谢，Bill

不确定，但.css('width')返回类似"100px"的值，Math.abs("100px")给出NaN。

尝试使用$('span.char1').width()。

此外，您必须记住向width添加任何margin和padding值。

必须使用填充-正在动态更改必须编写脚本等待动画结束，然后分配填充，这解决了视觉宽度问题；）

相关文章：