Mootools在Chrome下奇怪的表现

2008-10

Fdream 发表于 Ajax Web，已被阅读 927 次，评论 0 条
关键词：mootools Chrome Ajax JavaScript

[ 阅读字体大小：大中小 ]

写了个在页面中点击小图查看大图的功能，应用到了我的blog上，效果可以点一下我前一篇日志中的图。本来在Firefox和IE下都跑得挺好的，可惜我也比较喜欢用Chrome，于是用Chrome看了一下，结果却发现很奇怪的现象：先是两个不同对象的动画效果会混乱，好不容易调好了结果却发现大图的尺寸也乱了……

先是动画效果的问题，两个不同的Element，均使用MooTools封装后的Element对象的morph方法，代码如下：

参考代码： [复制代码] [保存代码]

// 背景层的动画
this._overlayer.morph({ 'opacity': [0, 0.8] });
// 图片的动画
this._imagelayer.morph({
    'left': ex,
    'top': ey,
    'width': size.width,
    'height': size.height,
    'padding': 8
});

代码中并没有想要改变this._overlayer宽和高，结果却是this._imagelayer出不来了，this._overlayer的宽和高却变成了图片的宽和高，想想应该是把morph对象弄混了。于是试试给this._imagelayer新new了一个Fx.Morph对象，这样子：

参考代码： [复制代码] [保存代码]

// 背景层的动画
this._overlayer.morph({ 'opacity': [0, 0.8] });
// 图片的动画
new Fx.Morph(this._imagelayer).start({
    'left': ex,
    'top': ey,
    'width': size.width,
    'height': size.height,
    'padding': 8
});

居然好了，还没有仔细看MooTools里面的相关代码，不知道问题出在哪。这个问题算是暂时解决了，不过后来发现图片一多，问题就来了：所有的图片的大图尺寸都变成了一样的……在代码中我使用了MooTools封装的Element对象的store方法来存储图片原始宽和高：

参考代码： [复制代码] [保存代码]

// w和h分别是图片原始宽和高
image.store('size', { 'width': w, 'height': h });

貌似图片一多，就只能存储最后一个值了，于是只好利用标签的属性来存储原始宽和高了，改成这样就没可以分开保存，再也不会弄混了：

参考代码： [复制代码] [保存代码]

// w和h分别是图片原始宽和高
image.setProperties({'w': w, 'h': h});