我设置了这个功能
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 文本的地方,你会看到它抛出了负数——这不应该发生!...所以我不知道问题/行为的结果是什么!!!令人沮丧!