Question

此代码取自http://wilq32.googlepages.com/wilq32.rollimage222，并且应该为图像旋转设置动画。

我无法准确地弄清楚结构，以及如何训练它来做我想要的事情，例如 - 使div X在悬停时旋转div Y（而不是旋转自身），或添加其他功能，如淡入淡出动画。

$(document).ready(function()
  {
   var rot=$('#image3').rotate({maxAngle:25,minAngle:-55,
    bind:
     [
     {"mouseover":function(){rot[0].rotateAnimation(85);}},
     {"mouseout":function(){rot[0].rotateAnimation(-35);}}
     ]
   });
  });

提前致谢

Answer 1

这就是它的作用。 1）等待页面加载$（文档）.ready（） 2）将“rot”指定为等于jQuery.rotate对象。 3）然后将此对象绑定到两个不同的事件，鼠标悬停和mouseout。绑定意味着当这些事件触发该段代码时将执行。

Mouseover启动“rotateAnimation（85）”，mouseout设置相同的功能-35。我猜它会反转它所看到的图像的旋转。

要向旋转添加内容，您可以执行此操作。

$(document).ready(function()
    {
            var rot=$('#image3').rotate({maxAngle:25,minAngle:-55,
            bind:
                    [
                            {"mouseover":function(){
                                 rot[0].rotateAnimation(85);}
                                 //insert awesome fades and effects here.
                            },
                            {"mouseout":function(){
                                 rot[0].rotateAnimation(-35);}
                                 // insert more cool fades and effects here.
                            }
                    ]
            });
    });

希望有所帮助。

Answer 2

根据文档的bind参数特定于rotateimage对象。相反，我认为您只想在事件触发时使用旋转功能。

$(document).ready(function()
{
     $('#divY').mouseover( $('#divX').rotate({angle:35}) );
     $('#divY').mouseout( $('#divX').rotate({angle:-85}) ); 
});

Answer 3

var rot包含对'#image3'的引用。然后逆时针旋转55度，顺时针旋转25度。此时没有用户可见的操作。＃image3已启用以接收rotateAnimation命令。

然后bind部分获取包含两个要绑定的对象的数组的内容。第一个绑定＃image3的mouseover，这样它就会触发调用旋转rot[0]，这本身就是顺时针85度。这不会移动85度，但受先前设置的限制，仅限于25度。

第二个与绑定mouseout做类似的事情，因此它将逆时针移动到35度，此行程不受minAngle的限制。

有人可以解释这个jQuery代码吗？

3 个答案: