3

この機能を設定しました

if (window.innerWidth && window.innerHeight) {
 var winW = window.innerWidth;
 }

var xM = winW/180; 

var axis = 0;
$(window).bind('mousemove',function(e){
 var xCoord =  Math.floor(e.pageX/xM);
 axis = 0.6 * Math.sin(xCoord);
 var pageCoords = "( " + e.pageX + ", " + e.pageY + ", " + xCoord + " )";
     $("span#showme").text(pageCoords);
 });
    setInterval(function() {
     $("#welcome-background").fadeTo(0, 0.4 + axis);
 }, 100);

（追加の参照と作業用ビジュアル-http ：//jsfiddle.net/ySjqh/2/）

このコードは理論的には、ページを0〜180のセグメントに均等に分割し、マウスが表示されるセグメントを計算します。次に、Math.sin（）関数を使用して、のパディングされた開始点に基づいて、適用する不透明度を導き出します。 0.4不透明度（jQueryスタイル）。マウスの位置を使用して、中央からの距離に基づいて残りの0.6のどれだけを適用するかを決定する必要があります。ここで、中央ページのマウスは完全な不透明度を生成します。

私が得られないのは、Math.sin（x）関数への入力を1 <x <180に制限したときに、スクリプトがこのように動作し、正弦波全体をロールスルーする理由です。xCoordをaxisinに置き換えた場合#showmeのjQueryテキストを作成する場所では、負の数がスローされることがわかります。これは発生しないはずです。...だから私は問題/行動が何から生じるのかわかりません!!! イライラする!!!

4

2 に答える 2

2

使用するだけです：

xCoord = (xCoord * Math.PI) / 180;  // Convert value to Radians

そしてそれは動作します。

サンプル

于 2013-01-30T12:07:45.937 に答える
1

http://jsfiddle.net/ySjqh/4/

axis = 0.6 * (1 - Math.abs(e.pageX - winW/2)/(winW/2));

の代わりに中心からのX距離を使用しsinます。

于 2013-01-30T11:47:09.843 に答える