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.动画时间.