鼠標移動 - 在Firefox

我試圖做一個「動畫」使用JavaScript的「鼠標移動」沒有工作你可以在這裏看到它鼠標移動 - 在Firefox

這是我使用

$("body").mousemove(function(e){ 
 
var wWidth = $("body").width()/2 
 
var wHeight = $("body").height()/2 
 
var posX; 
 
var posY; 
 
\t posX = e.pageX - (wWidth); 
 
\t posY = e.pageY - (wHeight) 
 
\t 
 
\t posX = scaleBetween(posX,-90,90,wWidth,-wWidth); 
 
\t posY = scaleBetween(posY,-90,90,wHeight,-wHeight); 
 
    //$("body").text("Position X"+ posX.toString() +" Y"+ posY.toString()); 
 
\t 
 
\t $("#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; 
 
} 
 

 
\t \t 
 
$("body").mousemove(function(e){ 
 
var wWidth = $("body").width()/2 
 
var wHeight = $("body").height()/2 
 
var posX; 
 
var posY; 
 
\t posX = e.pageX - (wWidth); 
 
\t posY = e.pageY - (wHeight) 
 
\t 
 
\t posX = scaleBetween(posX,90,-90,wWidth,-wWidth); 
 
\t posY = scaleBetween(posY,-90,90,wHeight,-wHeight); 
 
    //$("body").text("Position X"+ posX.toString() +" Y"+ posY.toString()); 
 
\t 
 
\t $("#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{ 
 
\t 
 
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 { 
 
\t 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上工作，任何想法從哪裏出現問題？感謝或您的寶貴幫助

來源

2015-10-20 Yagayente

我認爲這篇文章可能會幫助你：http://stackoverflow.com/questions/22716333/firefox-javascript-mousemove-not-the-same -as-jquery-mousemove – ImInThatCorner

Firefox使用-moz-transform http://stackoverflow.com/questions/7572884/webkit-transform-alternative-for-firefox – BenG

您正在使用的-webkit-transform僅適用於webkit瀏覽器。 insted使用 -moz-transform：rotateY（-90deg）;; -webkit-transform：rotateY（-90deg）; transform：rotateY（-90deg）; – Snm

$("body").mousemove(function(e){ 
 
var wWidth = $("body").width()/2 
 
var wHeight = $("body").height()/2 
 
var posX; 
 
var posY; 
 
\t posX = e.pageX - (wWidth); 
 
\t posY = e.pageY - (wHeight) 
 
\t 
 
\t posX = scaleBetween(posX,-90,90,wWidth,-wWidth); 
 
\t posY = scaleBetween(posY,-90,90,wHeight,-wHeight); 
 
    //$("body").text("Position X"+ posX.toString() +" Y"+ posY.toString()); 
 
\t 
 
\t $("#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; 
 
} 
 

 
\t \t 
 
$("body").mousemove(function(e){ 
 
var wWidth = $("body").width()/2 
 
var wHeight = $("body").height()/2 
 
var posX; 
 
var posY; 
 
\t posX = e.pageX - (wWidth); 
 
\t posY = e.pageY - (wHeight) 
 
\t 
 
\t posX = scaleBetween(posX,90,-90,wWidth,-wWidth); 
 
\t posY = scaleBetween(posY,-90,90,wHeight,-wHeight); 
 
    //$("body").text("Position X"+ posX.toString() +" Y"+ posY.toString()); 
 
\t 
 
\t 
 
$("#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{ 
 
\t 
 
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 { 
 
\t 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>

來源

2015-10-20 11:09:55 Snm

我添加了$（「＃hero」）。css（' - moz-transform'，'rotate3d（0,1,0，'+（posX）+'deg）'+'rotate3d（1,0,0，' +（ - posY）+'deg）'） – Snm

你可以在答案中提出這個問題，因爲它是一個重要的信息。 –

雅我會編輯答案。 – Snm

鼠標移動 - 在Firefox

回答

相關問題