4

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

我想要实现的是当您将鼠标悬停在它们上时改变每个字母的样式，文本不一定是链接，它也不是动态的意思是有一段静态的文本，我想将此效果应用于里面的每一个字母。

任何帮助表示赞赏。

谢谢。

4

4 回答 4

6

你可以试试zoomooz插件。

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

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

演示

于 2012-07-11T22:19:57.063 回答
4

我只是在这里玩这个想法，我没有考虑效率，这将取决于你。但是，如果我理解正确，您不会只是给每个字母一个 < span > 标签，然后玩 :hover 效果或使用 jquery/javascript 悬停效果来做您想做的事情，因为您将鼠标移到字母上？如果您不想手动插入所有跨度标签，您可以使用正则表达式为您执行此操作。

于 2012-07-11T22:31:35.293 回答
3

或者你可以这样做：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');
   });
于 2012-07-11T22:30:27.010 回答
3

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

这是一个示例（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;
}

​</p>

于 2012-07-12T16:27:08.380 回答