4

css/Javascript/jquery などを使用して Web ページに効果を作成することは可能でしょうか。これにより、ユーザーはテキストの個々の文字の上にマウスを置いて、一度に個々の文字を強調表示できます。これは一種の「ズーム」を作成するためです。アップ効果。各文字の上に小さな拡大鏡を表示するのが理想的ですが、それほど重要ではありません。

私が達成しようとしているのは、マウスを上に置くと個々の文字のスタイルを変更することです。テキストは必ずしもリンクであるとは限りません。また、テキストの静的な段落があることを意味する動的でもありません。この効果を適用したいと思いますその中の各文字。

どんな助けでも大歓迎です。

ありがとう。

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 ホバー効果を使用して、マウスを文字の上に移動したときにやりたいことをしたりしないでしょうか? すべての span タグを手動で挿入したくない場合は、正規表現を使用して挿入できます。

于 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 に答える