2

我有一个包含一堆句子的 div 和另一个包含图像的 div。当盘旋在太阳上时，我想让词从太阳后面出来，盘旋出去，回到太阳里。我没有得到预期的效果.show()and .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 回答