Question

我有一个包含一堆句子的div和另一个包含图像的div。当我在阳光下盘旋时，我希望这些话从太阳后面出来并徘徊，再回到太阳下。我对.show()和.hide()没有达到预期的效果。在太阳徘徊的时候，这些词会继续旋转。

这是图片。

enter image description here

我正在尝试这个工具，而这些单词将从太阳的中心后面出现，反之亦然，当它们徘徊时。

知道如何实现上述效果吗？这是我目前的代码。非常感谢！

$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');

});

Answer 1

使用css3 background-size：

jsBin demo

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);
    });

Answer 2

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>

jQuery让一个div出现在一个对象后面，并回到它的效果

2 个答案:

jsBin demo