Question

是否可以使用css / Javascript / jquery等在网页上创建效果，允许用户将鼠标悬停在文本的单个字母上并一次突出显示每个单独的字母，这是为了创建一种'放大'效果。理想情况下，在每个字母上显示一个小放大镜会很好但不是那么重要。

我想要实现的是在鼠标悬停时改变每个单独字母的样式，文本不一定是链接，它也不是动态的意思是有一个静态的文本段落，我想申请这个效果对其中的每个字母都有效。

感谢任何帮助。

感谢。

Answer 1

您可以尝试zoomooz插件。

或者，您可以使用span元素包装每个字母，然后为它们设置动画：

$("selector").hover(function(){
   $(this).animate({fontSize: "22"}, 300);
}, function() {
  $(this).animate({fontSize: "16"}, 300);  
})

DEMO

Answer 2

或者你可以这样做：http://jsfiddle.net/FPKAP/11/

缩放效果，希望这有助于:)

<强>码

$('#zoomimg').mouseenter(function()
       {

          $(this).css("cursor","pointer");
           $(this).animate({width: "50%", height: "50%"}, 'slow');


       });

    $('#zoomimg').mouseleave(function()
      {   
          $(this).animate({width: "28%"}, 'slow');
   });

Answer 3

我只是在玩这个想法，我没有考虑到效率，这取决于你。但是，如果我理解你的话，不会只给每一个字母一个＆lt; span＆gt;标签，然后玩：悬停效果或使用jquery / javascript悬停效果，当你将鼠标移到字母上时，做你想做的事情？如果您不想手动插入所有span标记，可以使用正则表达式为您执行此操作。

Answer 4

不是上面列出的那么好的解决方案，但是这里是用CSS3实现缩放效果的方法。

这是一个example (jsFiddle)，这是代码：

HTML

<h1>
<span>A</span>
<span>B</span>
<span>C</span>
</h1>

CSS

h1 {
    font-family: Arial;
    font-size: 62px;
    color: #000000;
}

h1 span { 
    display: inline-block;
    -webkit-transition: all 0.1s ease-out;
}

h1 span:hover {
    -webkit-transform: scale(2.0);
    cursor: pointer;
}

鼠标悬停放大对单个文本字母的影响

4 个答案: