Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/joomla/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使div朝向光标_Javascript_Jquery_Css - Fatal编程技术网
Fatal编程技术网

Javascript 使div朝向光标

javascript jquery css

Javascript 使div朝向光标,javascript,jquery,css,Javascript,Jquery,Css,通过组合前面的一些答案，我成功地使多个div元素三维旋转到光标（类似于眼睛的行为）。但是，仍然存在一些小错误： 水平移动光标时，在某一点，阴影将“中断”并被置换 如果光标被放置在所有4个元素的中间，则我期望对称行为。然而，事实并非如此 有人能帮我一下吗 这是代码（和笔：） 对于对称问题，解决方案是偏移主体宽度的一半： bodyHalfWidth = $('body').width()/2; // ... More code ... tilty = -Math.min(dx / (elCent

通过组合前面的一些答案，我成功地使多个div元素三维旋转到光标（类似于眼睛的行为）。但是，仍然存在一些小错误：

  • 水平移动光标时，在某一点，阴影将“中断”并被置换
    • 如果光标被放置在所有4个元素的中间，则我期望对称行为。然而，事实并非如此
有人能帮我一下吗

这是代码（和笔：）

对于对称问题，解决方案是偏移主体宽度的一半：

bodyHalfWidth = $('body').width()/2;
// ... More code ...
tilty = -Math.min(dx / (elCenterX  + bodyHalfWidth), 1);
这减少了效果，所以我添加了一个增益常数

bodyHalfWidth = $('body').width()/2;
gain = 2;
// ... More code ...
tilty = -Math.min(gain*dx / (elCenterX  + bodyHalfWidth), 1);
（编辑：George Lee在此处发布的其他子问题的解决方案，以整合整体答案）

要修复阴影破坏，请删除最后一条if语句
if（dx>elCenterX）
，只保留
$（this.css（'box-shadow'，+shady+'px'+（-shadx）+'px 5px 352a'）
我已经解决了阴影破坏问题，我只是想看看它们为什么不对称。要修复阴影破坏，请删除最后一条
if
语句
if（dx>elCenterX）
，只保留
$（this）.css（'box-shadow'，+shady+'px'+（-shadx）+'px 5px352a'）谢谢！对称问题确实很奇怪……你能解释一下对称问题的起源吗？提供的代码确实有效，但我无法立即想到为什么偏移主体宽度和
tilty
会相互连接…您正在使用tilty作为阴影的水平偏移<代码>$（this.css（'box-shadow'，+shady+'px'+（-shadx）+'px 5px#3D352A'）和身体一半的偏移量是因为那是你的零参考。

bodyHalfWidth = $('body').width()/2;
gain = 2;
// ... More code ...
tilty = -Math.min(gain*dx / (elCenterX  + bodyHalfWidth), 1);