写了个在页面中点击小图查看大图的功能,应用到了我的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});

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.