0

我正在尝试创建一种效果，其中 LP 唱片（我们将其称为背景图像）从唱片套（前景图像）后面滑出。我想用尽可能多的 CSS 来做到这一点，但是我知道让 LP 顺利滑入和滑出需要 JQuery。前景图像完全遮盖了背景图像，当悬停在前景图像上时，我无法弄清楚如何移动背景图像。如果可能的话，我还希望这两个图像都是锚点。希望这很清楚（ish）！如果有人可以帮助我，我将非常感激，谢谢！

这是我目前正在使用的内容

<div id="container">
  <img src="Record.png" width="200" height="200" id="record"/>
  <img src="Sleeve.png" width="200" height="200" id="sleeve" />
</div>

<!--CSS-->
#container {
    background-color: aqua;
    width: 500px;
    height: 400px;
    position: relative;
}

#record {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 1;
}

#sleeve {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 10;
}

编辑：

感谢所有人的回答，我正在尝试使用在这篇文章的第一条评论中给出的答案，但我一生都无法让它自己工作！谁能帮我看看我哪里出错了？再次感谢。

<!DOCTYPE html>
<html>

        <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="testing.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<body>

<div id="container">
  <img src="http://cdn1.iconfinder.com/data/icons/oldschool_babasse/Png/Hardware/CD%20oldSchool.png" width="200" height="200" id="record"/>
  <img src="http://cdn1.iconfinder.com/data/icons/softwaredemo/PNG/128x128/Box_Grey.png" width="200" height="200" id="sleeve" />
</div>​

<script>

$('#container').hover(function() {
    var record = $('img:eq(0)', this);
    record.stop(1,0).animate({
        left: '200px'
    }, 1000, function() {
        record.css('z-index', 11).stop(1, 0).animate({
            left: '0px'
        }, 1000);
    });
}, function() {
    var record = $('img:eq(0)', this);
    record.stop(1,0).animate({
        left: '200px'
    }, 1000, function() {
        record.css('z-index', 1).stop(1, 0).animate({
            left: '0px'
        }, 1000);
    });
});​

</script>

</body>
</html>

<!--CSS-->

#container {
    width: 400px;
    height:200px;
    position: relative;
    overflow:auto;
}

#record {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 1;
}

#sleeve {
    position: absolute;
    left: 0px;
    bottom: 0px;
    z-index: 10;
}​
4

3 回答 3

2

您可以通过将其添加到现有代码中来纯粹使用 css 来完成：

#record {
  -webkit-transition: left 0.5s ease-out; 
     -moz-transition: left 0.5s ease-out; 
      -ms-transition: left 0.5s ease-out; 
       -o-transition: left 0.5s ease-out; 
          transition: left 0.5s ease-out;
}

#container:hover #record {
    left: 100px;  /* This is assuming you want it to slide from left-to-right */
}

不幸的是，动画仅适用于较新的浏览器。较旧的浏览器只会显示弹出/弹出的记录，这可能会或可能不会产生可怕的影响。

如果您希望它在所有浏览器中工作，您需要使用一些 javascript 来制作动画。

于 2012-06-01T19:41:09.433 回答
1

从这个开始：

$("#sleeve").hover(
    function(){
       $("#record").animate({left: '+=100',bottom: '+=100'}, 1750);
    },
    function(){
       $("#record").animate({left: '-=100',bottom: '-=100'}, 1750);  
    });

悬停时，记录滑出，如果鼠标离开袖子，它会滑回来。你想拥有什么，你必须自己编写代码。

这是一个演示：http: //jsfiddle.net/rniestroj/nZhbg/

于 2012-06-01T19:49:14.067 回答
0

欢迎来到 StackOverflow。

通常，我们希望用户在向我们询问答案之前发布他们尝试过的代码，但这里有一些东西可以让您开始使用悬停：

$("selector").hover(function(){
  //do some code on hover
});

并带有动画：

$("selector").animate({
  //animate to these values
  left:250px,
});

也许查看这些文档以了解动画和选择器。

你也许可以用 CSS3 动画来做到这一点，但我给你的 jQuery 将支持跨浏览器，如果你愿意的话，你可以做更复杂的事情。

于 2012-06-01T19:41:39.477 回答