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 替换为 axis in在我为#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 回答