根據光標位置與jQuery旋轉元素

我想要做的是一個jQuery腳本，根據瀏覽器窗口中的光標位置旋轉div內的元素。根據光標位置與jQuery旋轉元素

的比例是一樣的東西：

maximum_pixels_x-AXYS：2°= center_pixels_x-AXYS：0°

與同爲Y軸。

如果光標位於屏幕的中心，則不旋轉。如果它在別的地方，它必須從0°旋轉到2°（或者取決於屏幕在相對笛卡爾平面中的位置的負值）。所以這是一個具有即時反饋的動態輪換。

就像你在這裏看到：http://css3playground.com/flashlight.php（從菜單中選擇「斜面」中選擇），但使用transform:rotate代替text-shadow。

現在我試着用transit.js，用sin e cos代替度數（從0到1的「度數」會導致）。我知道這不是正確的方式，但它是我想要獲得較低度數的最接近的方法。

var max_x = $(window).width(); 
var max_y = $(window).height(); 
var center_x = (max_x/2); 
var center_y = (max_y/2); 

$(document).mousemove(function(e) { 
    var mouse_x = e.pageX, 
    mouse_y = e.pageY, 
    hypotenuse = Math.sqrt(Math.pow((mouse_x-center_x),2)+Math.pow((mouse_y-center_y), 2)), 
    cos = (mouse_x-center_x)/hypotenuse, 
    sin = (mouse_y-center_y)/hypotenuse; 
    $('#div1, #div2').transition({ perspective: '400px', rotateX: sin, rotateY: cos }); 
});

但結果不是我所期望的。 div旋轉（以錯誤的方式旋轉），但不是動態的。

我該怎麼辦？

小提琴：http://jsfiddle.net/lucgenti/LtWtW/11/

來源

2013-07-22 lucgenti

加入小提琴鏈接jQuery的。我不知道爲什麼它不起作用，因爲在我的本地文件夾中它起作用（正如我所說的那樣錯誤）。 – lucgenti

對於你的'.ready'語法錯誤：你需要'';'在最後。第二，你如何導入transit.js？小提琴根本沒有輸入它，你可以將你的實現複製到小提琴嗎？ –

如果你將'sin'和'cos'的值更加極端（我把它們乘以30），你會發現它正在超載瀏覽器，導致它凍結 –

通過我們雙方的一些工作後，here is a new version 不使用插件是免費的前綴。注：在瀏覽器中這僅適用於支持CSS變換

這裏是我用來實現這種行爲

$(document).ready(function() { 
    var $one = $('#div1'), 
     $two = $('#div2'), 
     browserPrefix = "", 
     usrAg = navigator.userAgent; 
    if(usrAg.indexOf("Chrome") > -1 || usrAg.indexOf("Safari") > -1) { 
     browserPrefix = "-webkit-"; 
    } else if (usrAg.indexOf("Opera") > -1) { 
     browserPrefix = "-o"; 
    } else if (usrAg.indexOf("Firefox") > -1) { 
     browserPrefix = "-moz-"; 
    } else if (usrAg.indexOf("MSIE") > -1) { 
     browserPrefix = "-ms-"; 
    } 

    $(document).mousemove(function (event) { 
     var cx = Math.ceil(window.innerWidth/2.0), 
      cy = Math.ceil(window.innerHeight/2.0), 
      dx = event.pageX - cx, 
      dy = event.pageY - cy, 
      tiltx = (dy/cy), 
      tilty = - (dx/cx), 
      radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2)), 
      degree = (radius * 15); 

      shadx = degree*tiltx; /*horizontal shadow*/ 
      shady = degree*tilty; /*vertical shadow*/ 

     $one.css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)'); 
     $two.css(browserPrefix + 'transform', 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)'); 

     if(dx>cx) /*without that horizontal values are reversed*/ 
      $('#div1, #div2').css('box-shadow', + (-shady) + 'px ' + (-shadx) +'px 5px #3D352A'); 
     else $('#div1, #div2').css('box-shadow', + shady + 'px ' + (-shadx) +'px 5px #3D352A'); 
    }); 
});

來源

2013-07-22 19:16:45

非常好。我可以在這裏開始。謝謝！ – lucgenti

@lucgenti如果我們能夠根據光標位置獲得一種陰影效果，那將是非常棒的......我會在接下來的一週或兩週內對它進行調查，並在發現任何內容時更新您的信息 –

我在想一樣。我已經嘗試了一些，但並不好。我將在這裏更新我所得到的。 – lucgenti

根據光標位置與jQuery旋轉元素

回答

相關問題