【发布时间】：2015-10-20 20:15:01
【问题描述】：
我正在尝试使用 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 上不起作用， 问题出在哪里？ 谢谢或您的宝贵帮助
【问题讨论】：
-
我认为这篇文章可能会对您有所帮助：stackoverflow.com/questions/22716333/…
-
Firefox 使用 -moz-transform stackoverflow.com/questions/7572884/…
-
您正在使用 -webkit-transform，它仅适用于 webkit 浏览器。安装使用 -moz-transform: rotateY(-90deg);; -webkit-transform:rotateY(-90deg);变换：rotateY(-90deg);
标签： javascript jquery html css firefox