jQuery - 根据元素向右或向左悬停旋转Y答案

【问题标题】：jQuery - rotateY depending on element right or left hoverjQuery - 根据元素向右或向左悬停旋转Y
【发布时间】：2016-11-13 21:59:52
【问题描述】：

这是我的代码 - https://jsfiddle.net/agon024/o9sa7nyh/5/

:hover{
  transform: perspective(800px) rotateY(25deg);
  transition-timing-function: ease-in;
  transition: all, 0.5s;
}

我想要做的是让我的 div 元素旋转 25 度或 -25 度，具体取决于您是悬停在图像的左侧还是右侧。

正如您在小提琴中看到的，当您将鼠标悬停在它上面时，只需旋转 25 度。我怎么能用 jQuery 做到这一点？我发现这个小提琴（http://jsfiddle.net/HeFqh/11/）与我正在寻找的类似（就无缝过渡而言，但我需要它来旋转。

非常感谢任何帮助

【问题讨论】：

标签： javascript jquery css rotatetransform

【解决方案1】：

你可以这样做：

$( ".billMurray img" ).mousemove(
  function(e) {
 var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left);
if(relativeX< $(this).width()/2) {

 $( this ).addClass( "hover-left" );
  $( this ).removeClass( "hover-right" );
   $(this).removeClass('start');
}
else {
 $( this ).addClass( "hover-right" );
  $( this ).removeClass( "hover-left" );
     $(this).removeClass('start');
}



  }
);

$( ".billMurray img" ).mouseleave(function(){
 $( this ).removeClass( "hover-right" );
  $( this ).removeClass( "hover-left" );
  $(this).addClass('start');
});

所以，想法是：找到鼠标左右位置（首先获取中心）：https://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/ 用于图像，并添加和删除适当的类。由于鼠标离开图像时的无缝过渡，因此存在“开始”类...

DEMO，稍微修改了 CSS： https://jsfiddle.net/o9sa7nyh/6/

【讨论】：

【解决方案2】：

在每个hover事件计算父元素宽度；计算元素在数组中沿x 轴的开始位置和存储位置；检查当前event.clientX 是否小于当前元素的位置加上当前元素位置除以父容器中元素的.length。如果true，鼠标指针在元素左侧，在rotate()函数处设置-符号，否则鼠标指针在元素右侧，在rotate()函数处设置+符号。

var elems = $(".billMurray").hover(function(e) {
  var len = elems.length;
  // parent `.width()` divided by selected element `.length`
  var width = elems.parent().width() / len;
  // calculate beginning position of each element
  var res = $.map(Array(len), function(_, i) {
    return !i ? width / 2 : width * i
  });
  // mouse position
  var x = e.clientX;
  // select array index using element `.index()`
  var index = elems.index(this);
  // check if `x` is less than start of element
  // position plus element position divided by 
  // selected element collection `.length` along x axis
  // if `true` set sign to `-`, else set sign to `+`
  var sign = x < res[index] + (res[index] / len) ? "-" : "+";
  $(this).css("transform", "perspective(800px) rotateY(" + sign + "25deg)")
}, function() {
  $(this).css("transform", "perspective(800px) rotateY(0deg)")
})

.philWrap {
  margin-top: 50px;
}
.billMurray {
  width: 25%;
  float: left;
  text-align: center;
  -webkit-transform: perspective(800px) rotateY(0deg);
  -moz-transform: perspective(800px) rotateY(0deg);
  -o-transform: perspective(800px) rotateY(0deg);
  -ms-transform: perspective(800px) rotateY(0deg);
  transform: perspective(800px) rotateY(0deg);
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -moz-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  -webkit-transition: all, 0.5s;
  transition: all, 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="philWrap">
  <div class="billMurray"><img src="http://fillmurray.com/200/300" alt=""></div>
  <div class="billMurray"><img src="http://fillmurray.com/g/200/300" alt=""></div>
  <div class="billMurray"><img src="http://fillmurray.com/200/300" alt=""></div>
  <div class="billMurray"><img src="http://fillmurray.com/g/200/300" alt=""></div>
</div>

jsfiddle https://jsfiddle.net/o9sa7nyh/10/

【讨论】：