使（图像）向右移动并旋转 45 度，同时将鼠标悬停在另一个（图像）上

Posted 2023-05-08

【中文标题】使（图像）向右移动并旋转 45 度，同时将鼠标悬停在另一个（图像）上

【英文标题】：make a (image) move to the right and rotate 45 degrees while hovering over another (image)

【发布时间】：2017-04-23 16:55:51

【问题描述】：

我想将鼠标悬停在图像（音乐专辑）上，然后唱片推出，所以我希望它向右移动并旋转一点，当它悬停时，我希望它也能恢复正常动画。它已经可以向右移动，但我无法让它随之旋转。我喜欢让它尽可能简单，因为我不是编码专家。我正在使用 javascript 作为运动部分，如下所示，

$(document).ready(function ()
     $("#cover1").hover( function() 
         $("#coverrecord1").stop().animate( left: '5%' ); 
         , function()  
         $("#coverrecord1").stop().animate( left: '0' ); 
       ); 
)

【问题讨论】：

您可以在这里找到解决方案：***.com/questions/23695090/…

'我正在使用 javascript 作为移动部分' -> 你能在问题中发布那个“javascript 部分”吗？

如何在将鼠标悬停在另一张图片上时使用它？

$(document).ready(function () $("#cover1").hover(function() $("#coverrecord1").stop().animate( left: '5%' ); , function() $("#coverrecord1").stop().animate( left: '0' ); ); );

jsfiddle.net/62RJc/802

【参考方案1】：

你能测试一下这个jsfiddle 并告诉我这就是你要找的东西

$("#albumContainer>img").hover(function()
    $("#albumContainer>img").each(function()
    $(this).addClass("animate");
  );
  $(this).removeClass("animate");
);

$("#albumContainer>img").mouseout(function()
    $("#albumContainer>img").each(function()
   $(this).removeClass("animate");
  );
 );

【参考方案2】：

好的，您要查找的是 CSS3 transform 属性。

但是 - 它不适用于常规的 jQuery 动画。

所以你有几个选择：

用step编写你自己的函数（很好的例子：Animate element transform rotate）

在类中使用 CSS3 动画

类似这样的：

$("#cover1").hover( function() 
     $("#coverrecord1").addClass('rollOut'); 
     , function()  
     $("#coverrecord1").removeClass('rollOut'); 
   ); 

<style>
   #coverrecord1 transition:all 1s;
   .rollOut
      left: 5%;
      -ms-transform: rotate(45deg); /* IE 9 */
      -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
       transform: rotate(45deg);
    
</style>

有关 CSS3 动画的更多信息：http://www.w3schools.com/css/css3_animations.asp 和大量谷歌搜索结果

【参考方案3】：

我建议不要使用 JavaScript 来制作动画，而是使用 CSS 来制作。您可以使用以下代码简单地实现您想要的效果。

该示例只是为了让您了解它的外观。当然，从这一点开始你甚至可以微调你的动画。

HTML

<div class="album">
  <img class="cover" src="path"  />
  <img class="record" src="path"   />
</div>

CSS

.album 
  position: relative;
  width: 200px;
  height: 200px;
  background: #eee;
  cursor: pointer;


.cover 
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;


.record 
  position: absolute;
  top: 50%;
  left: 0;
  height: 100%;
  transform: translateY(-50%) rotate(0deg);
  transition: 0.3s;


.album:hover .record 
  left: 50%;
  transform: translateY(-50%) rotate(45deg);

.album 
  position: relative;
  width: 200px;
  height: 200px;
  background: #eee;
  cursor: pointer;

.cover 
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;

.record 
  position: absolute;
  top: 50%;
  left: 0;
  height: 100%;
  transform: translateY(-50%) rotate(0deg);
  transition: 0.3s;

.album:hover .record 
  left: 50%;
  transform: translateY(-50%) rotate(45deg);

<div class="album">
  <img class="cover" src="http://www.fuse.tv/image/56fe73a1e05e186b2000009b/768/512/the-boxer-rebellion-ocean-by-ocean-album-cover-full-size.jpg"  />
  <img class="record" src="http://www.clipartkid.com/images/853/vinyl-record-1-1024-768-descibel-radio-1TJlqv-clipart.png"  />
</div>

【参考方案4】：

用下面的标签试试

<img src="http://i.imgur.com/3DWAbmN.jpg" />
<img src="http://i.imgur.com/3DWAbmN.jpg" />

并在css下面添加

img
    border-radius:50%;    
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;



img:hover
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);