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类的实例。” / p>

如果我将元素作为CSS类并将其放入我的Mootools类中，它就会中断。即使它没有破坏，看起来Mootools只会让那个CSS类的所有元素同时生成动画，只有一个被moused结束。

我如何检测“放大CSS类的哪个实例被moused？我唯一的想法是找到一种方法来获取所有元素与”放大“CSS类，将它们放入一个数组，然后检查到看看正在盘旋的物品是否等于阵列中的一个物品。我不知道该怎么做或者这是最好的方式。

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

Answer 1

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

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

如果您想抓取所有图片，

您的选择器只是div.item-port > img。 div.item-port > img ! div.item-port将抓取父div而不是那些仅将图像作为直接子项的div。等。

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

在你到达那里之前，你有一个 a 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和任何这样的重复特异性。

Mootools - 检测css类的实例

1 个答案: