jQuery - rotateY 取决于元素向右或向左悬停
jQuery - rotateY depending on element right or left hover
这是我的代码 fiddle - https://jsfiddle.net/agon024/o9sa7nyh/5/
:hover{
transform: perspective(800px) rotateY(25deg);
transition-timing-function: ease-in;
transition: all, 0.5s;
}
我想做的是让我的 div 元素旋转 Y 25 度或 -25 度,具体取决于您是悬停在图像的左侧还是右侧。
正如您在 fiddle 中看到的那样,当您将鼠标悬停在它上方时,只需旋转 25 度。我怎样才能用 jQuery 做到这一点?我发现这个 fiddle ( http://jsfiddle.net/HeFqh/11/ ) 与我正在寻找的相似(就无缝过渡而言,但我需要它来旋转 Y.
非常感谢任何帮助
你可以这样做:
$( ".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/ 图像,并添加和删除适当的 类。 Class 'start' 是因为当鼠标离开图像时无缝过渡...
DEMO,稍作修改CSS:
https://jsfiddle.net/o9sa7nyh/6/
在每个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/
这是我的代码 fiddle - https://jsfiddle.net/agon024/o9sa7nyh/5/
:hover{
transform: perspective(800px) rotateY(25deg);
transition-timing-function: ease-in;
transition: all, 0.5s;
}
我想做的是让我的 div 元素旋转 Y 25 度或 -25 度,具体取决于您是悬停在图像的左侧还是右侧。
正如您在 fiddle 中看到的那样,当您将鼠标悬停在它上方时,只需旋转 25 度。我怎样才能用 jQuery 做到这一点?我发现这个 fiddle ( http://jsfiddle.net/HeFqh/11/ ) 与我正在寻找的相似(就无缝过渡而言,但我需要它来旋转 Y.
非常感谢任何帮助
你可以这样做:
$( ".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/ 图像,并添加和删除适当的 类。 Class 'start' 是因为当鼠标离开图像时无缝过渡...
DEMO,稍作修改CSS: https://jsfiddle.net/o9sa7nyh/6/
在每个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/