2

たくさんの文を含むdivと画像を含む別のdivがあります。太陽にホバリングするときは、太陽の後ろから言葉を出してホバリングし、太陽に戻ってほしい。.show()とで目的の効果が得られません.hide()。太陽がホバリングしている間、言葉は回転し続けます。

これが写真です。

ここに画像の説明を入力してください

私は道具を試していますが、ホバリングすると単語は太陽の中心から後ろから表示され、その逆も同様です。

上記の効果を実装する方法はありますか？これが私の現在のコードです。どうもありがとう！

$sun.hover(function(e) {
    $txt.show('slow');

    // text rotation
    var counter = 0;
    clearInterval(interval);
    interval = setInterval(function() {
        if (counter != -360) {
            counter -= 1;
            $txt.css({
                MozTransform: 'rotate(-' + -counter + 'deg)',
                WebkitTransform: 'rotate(-' + -counter + 'deg)',
                transform: 'rotate(-' + -counter + 'deg)',
            });
        }
    }, 20);

}, function(e) {
    clearInterval(interval);
    $txt.hide('slow');

});
4

2 に答える 2

1

css3を使用するbackground-size：

jsBinデモ

var $sun = $('#sun');
var $txt = $('#text');
var intvl;
var c = 0;

    $sun.hover(function(e){
      
        clearInterval(intvl);
        intvl = setInterval(function() {
            if (c != -360) {
                c += 1;
                $txt.css({
                    MozTransform: 'rotate(-'+c+'deg)',
                    WebkitTransform: 'rotate(-'+c+'deg)',
                    transform: 'rotate(-'+c+'deg)'
                });
            }
        }, 20);
      $txt.stop().animate({backgroundSize:'100%', opacity:'1'},700);
    }, function(){
        clearInterval(intvl);
        $txt.stop().animate({backgroundSize:'60%', opacity:'0.1'},400);
    });
于 2012-05-30T19:54:05.770 に答える
0

ここでは、 z-indexプロパティが役立つ場合があります。

以下の簡単な例では、テキストは最初に画像の後ろに設定されています。マウスを画像の上に置くと、テキストのz-index値が上に移動します。

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script type="text/javascript">
       function showCaption(){
          $(".caption").css("z-index","3");
       }
       function hideCaption(){
          $(".caption").css("z-index","1");
       }
    </script>

    <style type="text/css">
        #container{ position:relative; }
        .image{ position:fixed; top:0px; left:0px; z-index:2; }
        .caption{ position:fixed; top:0px; left:0px; z-index:1; }
    </style>
</head>

<body>
    <div id="container">
        <div class="image" onmouseover="showCaption();" onmouseout="hideCaption();">
            <img src="bill-gates-ms.jpg" />
        </div>
        <div class="caption">
            Some text here and here.
        </div>
    </div>

</body>
</html>
于 2012-05-30T19:56:14.947 に答える