아코디언 효과를 구현하는 순수 js 코드-JS 튜토리얼-php.cn

아코디언 효과를 구현하는 순수 js 코드

高洛峰

풀어 주다： 2016-10-12 09:29:33

원래의

1524명이 탐색했습니다.

현재 대부분의 프런트엔드 개발자가 개발을 위해 jQuery와 같은 타사 라이브러리를 사용하고 있는 것으로 알고 있습니다. 이렇게 하면 시간이 절약될 뿐만 아니라 효율성도 크게 향상되고 회사의 이익도 높아집니다.

그러나 여기에는 특정 단점도 있습니다. 예를 들어 jQ는 특히 대규모 프로젝트에서 나타날 수 있는 속도입니다. 아래에서는 간단한 아코디언 효과를 구현하기 위해 기본 js를 사용합니다.

HTML 코드는 다음과 같습니다

구조는 매우 간단합니다. 단 5개의 li 상자로, js 코드는 이미지를 렌더링합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

로그인 후 복사

CSS 코드는 다음과 같습니다.

이번 프로젝트의 사진은 이전에 만들었던 1226*446 사진이라 너비와 높이를 제가 작업하던 시기에 맞게 설정해 주셨네요. 프로젝트에 다른 크기의 사진을 배치하려면 실제 상황에 따라 조정하십시오. ..

ul {
    list-style: none
}

* {
    margin: 0;
    padding: 0;
}

div {
    width: 1150px;
    height: 400px;
    margin: 50px auto;
    border: 1px solid red;
    overflow: hidden;
}

div li {
    width: 240px;
    height: 400px;
    float: left;
    /*background-image: url(images/1.jpg);*/
}

div ul {
    width: 1300px;

}

로그인 후 복사

다음은 기본 js를 즐기십시오. 많은 사람들이 기본 js를 거의 잊어버렸습니다)

//누군가 찾기
var box = document.getElementById("box");
var ul = box.children[0];
var lis = ul.children;

//lis를 반복하여 배경 그림을 바인딩합니다

for (var i = 0; i lis[i].style.groundImage = "url(images/" + (i + 1) + ".jpg)";

//마우스가 지나간 후 각각의 마우스 패스 이벤트를 등록합니다. , 배타적이어야 합니다

lis[i].onmouseover = function () {

// 모든 사람의 너비가 점차 100이 되도록 모두를 죽입니다

for (var j = 0; j animate(lis[j], {"width": 100);
}

//마우스가 box 및 모든 li 너비는 점차 240이 됩니다

box.onmouseout = function () {
for (var i = 0 ; i animate(lis[i] , {"width": 240});
}
};

//jQuery Animation 함수에는 animate가 있는데, 구현 원리는 다음과 같습니다. jQ, 기본 효과 구현에는 아직 문제가 없습니다
function animate(obj, json) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {

//이 실행 후 모든 속성이 목표에 도달했다고 가정합니다.

var flag = true;
for (var k in json) {
var Leader = parseInt(getStyle( obj, k)) || 0;
var target = json[k];
var step = (대상 - 리더) / 10;
            step = step > 0 Math.ceil(step): Math.floor(단계);
           리더 = 리더 + 스텝;
               obj.style[k] = 리더 + "px";
                                      > 대상 ) {

FLAG = FALSE; // 현재 속성에 도달하지 않았음을 표시

}
}
// 모든 것이 실제로 도착했음을 나타냅니다

if (flag) {
clearInterval(obj.timer);
}
}, 15) /모든 속성은 목표 값에 도달하면 지워져야 합니다

function getStyle( obj, attr) {
if (window.getCompulatedStyle) {
return window.getComputeStyle(obj, null)[attr];
} else {
} return obj.currentStyle[attr];
}
}

위 코드는 모두 코드입니다. 5개의 사진을 찾아 시도해 보세요.