实现手风琴效果的四种方法

1.hover

2.target

目标伪类选择器:target
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。

3.checked

4.JavaScript

Move:

function getStyle(obj, attr) {
    if(obj.currentStyle) {    //IE
        return obj.currentStyle[attr];
    }else {
        return getComputedStyle(obj, false)[attr];
    }
}
function Move(obj, json, second, fn) {

    clearInterval(obj.time);

    obj.time = setInterval(function() {

        var flag = true;  // flag记录是否执行完成
        for(var key in json) {
            // 1.取当前的值
            var temp = 0;
            temp = parseFloat(getStyle(obj, key));

            //2.计算速度
            var speed = (json[key] - temp) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            // 3. 监测停止
            if(temp != json[key]) {
                flag = false;   //flag 为 false 说明同时执行的属性没有执行完
                obj.style[key] = temp + speed + "px";
            }
        }
        //判断同时执行的属性,是否都执行完,若是则停止定时器
        if(flag == true) {
            clearInterval(obj.time);
            if(fn) {  
                fn();
            }
        }
    }, second);
}

实现手风琴效果的四种方法

1.hover

导航一

导航二

导航三

导航四

2.target

3.checked

4.JavaScript

导航一

导航二

导航三

导航四

你可能感兴趣的:(实现手风琴效果的四种方法)