我正在尝试使用javascript的“ mousemove”制作“动画”
在这里你可以看到它
这是我正在使用的代码
$("body").mousemove(function(e){
var wWidth = $("body").width()/2
var wHeight = $("body").height()/2
var posX;
var posY;
posX = e.pageX - (wWidth);
posY = e.pageY - (wHeight)
posX = scaleBetween(posX,-90,90,wWidth,-wWidth);
posY = scaleBetween(posY,-90,90,wHeight,-wHeight);
//$("body").text("Position X"+ posX.toString() +" Y"+ posY.toString());
$("#hero").css('-webkit-transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
});
function scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max){
return (maxAllowed-minAllowed)*(unscaledNum-min)/(max - min) + minAllowed;
}
$("body").mousemove(function(e){
var wWidth = $("body").width()/2
var wHeight = $("body").height()/2
var posX;
var posY;
posX = e.pageX - (wWidth);
posY = e.pageY - (wHeight)
posX = scaleBetween(posX,90,-90,wWidth,-wWidth);
posY = scaleBetween(posY,-90,90,wHeight,-wHeight);
//$("body").text("Position X"+ posX.toString() +" Y"+ posY.toString());
$("#hero2").css('-webkit-transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
});
function scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max){
return (maxAllowed-minAllowed)*(unscaledNum-min)/(max - min) + minAllowed;
}body{
width:100vw;
height:100vh;
margin: 0px;
}
.bighero {
position: absolute;
width:100%;
height: 100%;
display : table-cell;
vertical-align : middle;
horinzontal-align : middle;
text-align:center;
z-index: 500;
}
img {
width:100vw;
height:50vh;
}
#hero2 {
margin-top: -5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="bighero">
<div id="hero">
<img src="http://cdn.playbuzz.com/cdn/0079c830-3406-4c05-a5c1-bc43e8f01479/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg"/>
</div>
<div id="hero2">
<img src="http://cdn.playbuzz.com/cdn/0079c830-3406-4c05-a5c1-bc43e8f01479/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg"/>
</div>
</div>
</body>原来动画在Firefox上不起作用，
问题出在哪里？
谢谢或您的宝贵帮助
最佳答案
$("body").mousemove(function(e){
var wWidth = $("body").width()/2
var wHeight = $("body").height()/2
var posX;
var posY;
posX = e.pageX - (wWidth);
posY = e.pageY - (wHeight)
posX = scaleBetween(posX,-90,90,wWidth,-wWidth);
posY = scaleBetween(posY,-90,90,wHeight,-wHeight);
//$("body").text("Position X"+ posX.toString() +" Y"+ posY.toString());
$("#hero").css('-webkit-transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
$("#hero").css('-moz-transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
$("#hero").css('transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
});
function scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max){
return (maxAllowed-minAllowed)*(unscaledNum-min)/(max - min) + minAllowed;
}
$("body").mousemove(function(e){
var wWidth = $("body").width()/2
var wHeight = $("body").height()/2
var posX;
var posY;
posX = e.pageX - (wWidth);
posY = e.pageY - (wHeight)
posX = scaleBetween(posX,90,-90,wWidth,-wWidth);
posY = scaleBetween(posY,-90,90,wHeight,-wHeight);
//$("body").text("Position X"+ posX.toString() +" Y"+ posY.toString());
$("#hero2").css('-webkit-transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
$("#hero2").css('-moz-transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
$("#hero2").css('transform', 'rotate3d(0,1,0,'+(posX)+'deg)' + 'rotate3d(1,0,0,'+(-posY)+'deg)' )
});
function scaleBetween(unscaledNum, minAllowed, maxAllowed, min, max){
return (maxAllowed-minAllowed)*(unscaledNum-min)/(max - min) + minAllowed;
}body{
width:100vw;
height:100vh;
margin: 0px;
}
.bighero {
position: absolute;
width:100%;
height: 100%;
display : table-cell;
vertical-align : middle;
horinzontal-align : middle;
text-align:center;
z-index: 500;
}
img {
width:100vw;
height:50vh;
}
#hero2 {
margin-top: -5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="bighero">
<div id="hero">
<img src="http://cdn.playbuzz.com/cdn/0079c830-3406-4c05-a5c1-bc43e8f01479/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg"/>
</div>
<div id="hero2">
<img src="http://cdn.playbuzz.com/cdn/0079c830-3406-4c05-a5c1-bc43e8f01479/7dd84d70-768b-492b-88f7-a6c70f2db2e9.jpg"/>
</div>
</div>
</body>