jQuery的 - 旋转Y取决于元素向右或向左盘旋

这里是我的代码小提琴 - https://jsfiddle.net/agon024/o9sa7nyh/5/jQuery的 - 旋转Y取决于元素向右或向左盘旋

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

我所试图做的是有我的div元素旋转Y在25度-25度，这取决于是否不是你在图像的左侧或右侧悬停。

正如你可以在小提琴中看到的，当你将鼠标悬停在它上面时，只需旋转25度即可。我怎样才能做到这一点与jQuery？我发现这个小提琴（http://jsfiddle.net/HeFqh/11/）类似于我所期待的（尽可能的无缝转换，但我需要它旋转Y

任何帮助是极大的赞赏

来源

2016-11-13 agon024

你可以做这样的事情：

$(".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/

来源

2016-11-13 22:41:06 sinisake

在每个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/

来源

2016-11-13 22:54:59 guest271314

jQuery的 - 旋转Y取决于元素向右或向左盘旋

回答

相关问题