我有一个网站,我添加了一些基本的 Mootools 动画。这是我有问题的网站页面:
http://www.humsdrums.com/portfolio/webdesign.html
您会注意到,当您将鼠标悬停在大图像上时,它们会褪色并且放大镜会向下补间。这是我为此制作的名为“放大”的 Mootools 类:
var Magnify = new Class({
Implements : [Options, Events],
options : {
},
initialize : function (item, image, options)
{
this.setOptions(options);
this.div = document.id(item);
this.img = $$(image);
this.tweenBackground = new Fx.Tween(this.div,{
duration:'250',
property:'background-position'
});
this.div.addEvent('mouseenter', this.reveal.bind(this));
this.div.addEvent('mouseleave', this.hide.bind(this));
},
reveal : function()
{
this.tweenBackground.cancel();
this.tweenBackground.start('175px -78px', '175px 90px');
this.img.tween('opacity', .15);
console.log('mouse over');
},
hide :function ()
{
this.tweenBackground.cancel();
this.tweenBackground.start('175px 90px', '175px -78px');
this.img.tween('opacity', 1);
}
});
然后,我需要通过获取 css id 为我想要执行此操作的每个元素初始化类的实例。
window.addEvent('domready', function()
{
var magnify1 = new Magnify('p1', '#p1 img');
var magnify2 = new Magnify('p2', '#p2 img');
var magnify3 = new Magnify('p3', '#p3 img');
var magnify4 = new Magnify('p4', '#p4 img');
});
我想要做的很简单,给我想要这个功能的每个元素一个 CSS 类“放大”,这样我就不必每次都使用单独的 ID 并添加另一个 Mootools 类的实例。
如果我将元素添加到 CSS 类并将其放入我的 Mootools 类中,它就会中断。即使它没有中断,似乎 Mootools 只会让所有具有该 CSS 类的元素在只有一个鼠标悬停时同时具有动画效果。
我将如何检测“放大 CSS 类”的哪个实例被鼠标悬停?我唯一的想法是找到一种方法来使用“放大”CSS 类抓取所有元素,将它们放入一个数组中,然后检查是否悬停在上面的项目等于数组中的项目之一。我不知道该怎么做,或者这是否是最好的方法。
任何帮助或建议都会很棒!如果您想查看更多代码或者我是否可以更好地解释一些内容,请告诉我。