js 风琴效果

 

一.功能描述

初始状态: 默认打开第一张图.

动效: 1.打开鼠标选择的图片,其他图片收缩.

        2.鼠标离开图片所在区域,回到初始状态.

二.实现思路

1.css实现初始状态.

2.js实现动效:

    1)鼠标移入图片,当前图片宽度放大至最大值,其他图片收缩.

    2)鼠标移出图片区域,第一张图片放大至最大值,其他图片收缩.

三.遇到的困难

1.非行间样式的获取.

var width = that.currentStyle ? that.currentStyle.width : getComputedStyle(that,false).width;

2.事件的获取.

function openOrgan(event) {
    event = event || window.event;

}

3.方法的使用.

var organs = oDiv.getElementsByTagName('div');
openOrgan.call(organs[0],event);

四.关于组件化的思考

需要配置的参数和属性:

1.图片的高度,宽度最小值,宽度最大值.
3.图片的地址(以数组的形式存放).
4.动画时间.