Mootools - 检测 css 类的实例

Question

我有一个网站，我添加了一些基本的 Mootools 动画。这是我有问题的网站页面：

http://www.humsdrums.com/portfolio/webdesign.html

您会注意到，当您将鼠标悬停在大图像上时，它们会褪色并且放大镜会向下补间。这是我为此制作的名为“Magnify”的 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 类抓取所有元素，将它们放入数组中，然后检查查看悬停的项目是否等于数组中的项目之一。我不知道该怎么做，或者这是否是最好的方法。

任何帮助或建议都会很棒！如果您想查看更多代码或者我是否可以更好地解释一些内容，请告诉我。

Answer 1

您需要更多地编写模式。首先 - 你有 2 个元素的关系 - 一个包含 div 和一个图像。

您的事件实际上是在父 el 上，但您还需要引用内部元素（图像）并为其设置动画。

如果你想抓取所有图像，你的选择器就是div.item-port > img。 div.item-port > img ! div.item-port 将抓取父 div，而不是那些仅将图像作为直接子元素的 div。等等。

然后您需要决定将事件附加到哪个元素。您的标记中有很多选择。

在你到达那里之前，你有一个 a href 包装了你的两个元素。这允许您使用跨浏览器 :hover 伪。

你可以很容易地用纯 css 做：

div.port-item {
    /* defaults you already have and then ... */
    background-position: 175px -78px;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
    -ms-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.portfolio-item a:hover div.port-item {
    background-position: 175px 90px;
}

.portfolio-item a:hover img {
    opacity: .15; // etc for cross-browser
}

只有当你想在浏览器不支持转换时恢复，你才应该实例化你的 js 类。 http://jsfiddle.net/wMnzb/4/

var Magnify = new Class({

  Implements: [Options],

  options: {
    parent: 'div'
  },

  initialize: function (images, options) {
    this.setOptions(options);
    this.elements = document.getElements(images);
    this.attachEvents();
  },
  attachEvents: function () {
    var selector = this.options.parent;
    this.elements.each(function (el) {
      var parent = el.getParent(selector);

      parent.set('tween', {
        duration: '250',
        link: 'cancel'
      });
      parent.addEvents({
        mouseenter: function () {
          this.tween('background-position', '175px 90px');
          el.fade(0.15);
        },
        mouseleave: function () {
          this.tween('background-position', '175px -78px');
          el.fade(1);
        }
      });
    });
  }   

});

new Magnify('div.port-item > img');

尽可能地简化，但你明白了 - 从 ids 和任何此类重复的特异性中完全模棱两可。