如何基於使用jQuery和CSS

Question

我在屏幕的中間的固定寬度元件鼠標運動而旋轉元件到左和右，絕對定位：

div { 
    width:50px; 
    height:200px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-100px -25px; 
    background:red; 
} 

當光標在中間屏幕上，我想完全直接顯示上面的div。當我將光標移動到屏幕左側時，我想將div向左旋轉20度，同樣也向右側移動。這是我走到這一步：

var bodywidth = $("body").width(); 
function mouse(evt) { 

    //getting mouse dimentions 
    var pageX = event.pageX;     
    var now = bodywidth/pageX; 

    $("div").css({ 
     transform: 'rotate(' + now + 'deg)' 
    }); 

} 
$("body").mousemove(mouse); 

http://jsfiddle.net/rsog7e6f/

對如何進行任何提示嗎？謝謝。

Answer 1

var now = 40 * pageX/bodywidth - 20; 

這應該回答你的問題。

Codepen because Jsfiddle acts weird here

Answer 2

你需要用一個值映射身體的一半0和180之間

function mapWidthToDegs(x,w) { 
    var factor = 180/(w/2); 
    return factor * x - w 
} 

見this Fiddle