Javascript Jquery均匀调整锚文本的大小

我正在尝试均匀地增加然后减小段落内锚文本的字体大小，而不移动段落文本。这样，锚文本看起来就像是向用户走来，然后又回到原来的位置。字体大小也似乎是从左下角开始增长的，而我想要的是从各个方向均匀增长

HTML:

<p>
  <a>[D]</a>I've been workin' on the railroad,
  <a>[G]</a>all the live long <a>[D]</a>day.
  <a>[D]</a>I've been workin' on the railroad,
  just to <a>[E]</a>pass the time a<a>[A]</a>way.
</p>

p {
  white-space: pre-wrap;
}

a {
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  color:red;
}
.increase-font {
  font-size: 30px;
  background:#FFF;
}

$('a').on('click',function(e){
  e.preventDefault();
  var el = this;
  $(el).addClass('increase-font');
  setTimeout(function(){  
   $(el).removeClass('increase-font');
  },1000);
});

Jquery/Javascript:

<p>
  <a>[D]</a>I've been workin' on the railroad,
  <a>[G]</a>all the live long <a>[D]</a>day.
  <a>[D]</a>I've been workin' on the railroad,
  just to <a>[E]</a>pass the time a<a>[A]</a>way.
</p>

p {
  white-space: pre-wrap;
}

a {
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  color:red;
}
.increase-font {
  font-size: 30px;
  background:#FFF;
}

$('a').on('click',function(e){
  e.preventDefault();
  var el = this;
  $(el).addClass('increase-font');
  setTimeout(function(){  
   $(el).removeClass('increase-font');
  },1000);
});

这是小提琴：

<p>
  <a>[D]</a>I've been workin' on the railroad,
  <a>[G]</a>all the live long <a>[D]</a>day.
  <a>[D]</a>I've been workin' on the railroad,
  just to <a>[E]</a>pass the time a<a>[A]</a>way.
</p>

p {
  white-space: pre-wrap;
}

a {
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  color:red;
}
.increase-font {
  font-size: 30px;
  background:#FFF;
}

$('a').on('click',function(e){
  e.preventDefault();
  var el = this;
  $(el).addClass('increase-font');
  setTimeout(function(){  
   $(el).removeClass('increase-font');
  },1000);
});

---

这相对简单-只需将锚定标记包装在跨度标记中：

<p><a><span>[D]</span></a>I've been workin' on the railroad,</p>
<p><a><span>[G]</span></a>all the live long <a><span>[D]</span></a>day.</p>
<p><a><span>[D]</span></a>I've been workin' on the railroad, just to <a><span>[E]</span></a>pass the time a<a><span>[A]</span></a>way.</p>

$('span').on('click',function(e){
  e.preventDefault();
  var el = this;
  $(el).addClass('increase-font');
  setTimeout(function(){  
   $(el).removeClass('increase-font');
  },1000);
})

然后，只需将jQuery事件处理程序从在所有锚标记上注册切换到所有span标记：

<p><a><span>[D]</span></a>I've been workin' on the railroad,</p>
<p><a><span>[G]</span></a>all the live long <a><span>[D]</span></a>day.</p>
<p><a><span>[D]</span></a>I've been workin' on the railroad, just to <a><span>[E]</span></a>pass the time a<a><span>[A]</span></a>way.</p>

$('span').on('click',function(e){
  e.preventDefault();
  var el = this;
  $(el).addClass('increase-font');
  setTimeout(function(){  
   $(el).removeClass('increase-font');
  },1000);
})

由于绝对元素已从DOM流中删除，因此调整跨距的大小不会影响其周围的元素。完整代码如下：

---

这相对简单-只需将锚定标记包装在跨度标记中：

<p><a><span>[D]</span></a>I've been workin' on the railroad,</p>
<p><a><span>[G]</span></a>all the live long <a><span>[D]</span></a>day.</p>
<p><a><span>[D]</span></a>I've been workin' on the railroad, just to <a><span>[E]</span></a>pass the time a<a><span>[A]</span></a>way.</p>

$('span').on('click',function(e){
  e.preventDefault();
  var el = this;
  $(el).addClass('increase-font');
  setTimeout(function(){  
   $(el).removeClass('increase-font');
  },1000);
})

然后，只需将jQuery事件处理程序从在所有锚标记上注册切换到所有span标记：

<p><a><span>[D]</span></a>I've been workin' on the railroad,</p>
<p><a><span>[G]</span></a>all the live long <a><span>[D]</span></a>day.</p>
<p><a><span>[D]</span></a>I've been workin' on the railroad, just to <a><span>[E]</span></a>pass the time a<a><span>[A]</span></a>way.</p>

$('span').on('click',function(e){
  e.preventDefault();
  var el = this;
  $(el).addClass('increase-font');
  setTimeout(function(){  
   $(el).removeClass('increase-font');
  },1000);
})

由于绝对元素已从DOM流中删除，因此调整跨距的大小不会影响其周围的元素。完整代码如下：

---

要实现这一点，锚文本需要在某种程度上独立于父文本。使用CSS

：before

或

：after

选择器插入锚文本将解决此问题。查看我的示例并根据需要进行调整

$（'a'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
var el=这个；
$（el）.addClass（'rease-font'）；
setTimeout（函数（）{
$（el）.removeClass（'rease-font'）；
}, 1000);
})

p{
空白：预包装；
左侧填充：30px；
显示：内联块；
宽度：100%；
位置：相对位置；
}
a{
-webkit过渡：所有.5s轻松输入输出；
-moz过渡：所有.5s轻松输入输出；
-ms过渡：所有.5s易进易出；
-o型过渡：所有。5s易进易出；
过渡：全部。5s轻松进出；
颜色：红色；
显示：内联块；
位置：相对位置；
宽度：30px；
高度：10px；
}
a:以前{
内容：“[D]”；
位置：绝对位置；
左：0；
文本对齐：居中！重要；
宽度：100%；
顶部：-5px；
}
.增加字体{
字体大小：30px；
背景：#FFF；
}

我一直在铁路上工作

所有的人都活得很长

我一直在铁路上工作，只是为了打发时间。

为了实现这一点，锚文本需要在某种程度上独立于父文本。使用CSS

：before

或

：after

选择器插入锚文本将解决此问题。查看我的示例并根据需要进行调整

$（'a'）。在（'click'）上，函数（e）{
e、 预防默认值（）；
var el=这个；
$（el）.addClass（'rease-font'）；
setTimeout（函数（）{
$（el）.removeClass（'rease-font'）；
}, 1000);
})

p{
空白：预包装；
左侧填充：30px；
显示：内联块；
宽度：100%；
位置：相对位置；
}
a{
-webkit过渡：所有.5s轻松输入输出；
-moz过渡：所有.5s轻松输入输出；
-ms过渡：所有.5s易进易出；
-o型过渡：所有。5s易进易出；
过渡：全部。5s轻松进出；
颜色：红色；
显示：内联块；
位置：相对位置；
宽度：30px；
高度：10px；
}
a:以前{
内容：“[D]”；
位置：绝对位置；
左：0；
文本对齐：居中！重要；
宽度：100%；
顶部：-5px；
}
.增加字体{
字体大小：30px；
背景：#FFF；
}

我一直在铁路上工作

所有的人都活得很长

我一直在铁路上工作，只是为了打发时间。

你能解释一下“不移动段落文本”是什么意思吗？当你点击小提琴上的锚时，你会看到段落文本在上面、下面或两边移动。特别是如果你点击中间线中的一个锚。您将看到段落行之间的间距增大。我只是想增加锚的字体大小，而不影响周围的一切。我不认为这是一项琐碎的任务。我要做的是：1）为锚点提供一个具有相对位置的容器2）单击锚点上的set

visibility:hidden

（不要使用display:none，您仍然希望元素占据空间）3）克隆容器内的锚点4）为克隆提供一个绝对位置。5） 将增长/收缩应用于克隆-这样周围的文本就不会受到影响。请您解释一下“不移动段落文本”是什么意思吗？当您单击小提琴中的定位点时，您将看到上面、下面或两边的段落文本都会移动。特别是如果你点击中间线中的一个锚。您将看到段落行之间的间距增大。我只是想增加锚的字体大小，而不影响周围的一切。我不认为这是一项琐碎的任务。我要做的是：1）为锚点提供一个具有相对位置的容器2）单击锚点上的set

visibility:hidden

（不要使用display:none，您仍然希望元素占据空间）3）克隆容器内的锚点4）为克隆提供一个绝对位置。5） 将增长/收缩应用于克隆-这样周围的文本就不会受到影响，这似乎让我大部分时间都在那里。谢谢你这么做。我仍然不确定如何使文本大小均匀地增加，而不是从一个角开始。有什么想法吗？我可能会使用

transform:scale（x）

和

transform-origin:50%50%

，而不是更改字体大小。我已经更新了我的小提琴链接。这似乎让我大部分的路。谢谢你这么做。我仍然不确定如何使文本大小均匀地增加，而不是从一个角开始。有什么想法吗？我可能会使用

transform:scale（x）

和

transform-origin:50%50%

，而不是更改字体大小。我已经更新了我的小提琴链接。