Mootools -检测css类的实例

Question

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

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

你会注意到，当你将鼠标移到大图上时，它们会褪色，一个放大镜会补间。这是我为此创建的Mootools类，名为"Magnify“：

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类的所有元素，将它们放入一个数组中，然后检查悬停在上面的项是否等于数组中的一个项。我不知道该怎么做，也不知道这是不是最好的方法。

任何帮助或建议都是很棒的！如果你想看到更多的代码，或者我可以解释一些更好的东西，请告诉我。

Answer 1

你需要对模式进行更多的编码。首先，你有两个元素的关系--一个包含div的元素和一个图像。

您的事件实际上在父el上，但您还需要引用内部元素(图像)并对其进行动画处理。

如果你想抓取所有的图片，你的选择器就是div.item-port > img。div.item-port > img ! div.item-port将获取父div，而不是仅将图像作为直接子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');

尽可能地简化，但您可以从is和任何这种重复的特异性中获得完全模糊的概念。