Mootools - 检测一个css类的实例

Question

我有一个网站，我已经添加了一些基本的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类的所有元素都具有相同的动画效果当只有一个被隐藏起来的时候

我该如何检测哪个“magnify CSS class正在被淹没？我唯一的想法是找到一种方法来抓住所有具有“magnify”CSS类的元素，将它们放入一个数组中，然后检查被悬停的项是否等于数组中的某个项。我不知道该怎么做，或者如果这是最好的方法。

任何帮助或建议将是伟大的！让我知道你是否想看更多的代码，或者如果我能更好地解释一些东西。谢谢！

Answer 1

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

你的事件实际上是在父EL，但你也需要引用和动画的内部元素（图像）。

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

然后你需要决定什么元素附加事件。你的标记有很多选择。

甚至在你到达那里之前，你有一个包装你的元素的一个href。它允许你使用跨浏览器：hover pseudo。

，你可以很容易做纯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和任何这种重复特异性完全明确。