아코디언 그림 전환 케이스의 JavaScript 구현

이 글은 주로 자바스크립트를 사용하여 아코디언 이미지 전환을 구현하는 사례를 공유합니다. 먼저 전환 효과를 살펴보세요.

2. JavaScript는 구조적 논리 정렬을 지향합니다.

(function(){
var con = document.getElementsByClassName('hm_icr_tr')[0];  //包裹层盒子
var aSpan = con.getElementsByClassName('hmii_item_chover'); //点击交互处盒子
var items = con.getElementsByClassName('hm_itr_item'); //每个运动的大盒子
var contents = con.getElementsByClassName('hmii_item_content');  //运动大盒子里面的文本内容
var clickIndex = 0;

for(var i=0;i<aSpan.length;i++)
{
    aSpan[i].index = i;
    aSpan[i].onmouseover = function(){

        //确定点的顺序
        clickIndex = this.index;
        for(var j=0;j<items.length;j++)
        {
            items[j].style.width = 30 + &#39;px&#39;;
            contents[j].style.transition = &#39;0s&#39;;
            contents[j].style.opacity = 0;
            aSpan[j].style.opacity = 1;
        }

        //盒子
        items[this.index].style.width = 160 + &#39;px&#39;;

        //当前点击块
        this.style.opacity = 0;
    }
}

//运动结束事件监听
for(var i=0;i<items.length;i++)
{
    items[i].num = i;
    items[i].addEventListener(&#39;transitionend&#39;, function(ev){
       console.log(clickIndex);
       contents[clickIndex].style.transition = &#39;.8s&#39;;
       contents[clickIndex].style.opacity = &#39;1&#39;;
    });
} 
})();

3. HTML과 CSS는 지저분할 수 있지만 핵심 구현은 위에서 언급한 간단한 js 논리 문을 완성하는 것입니다. 이 경우 프로그래밍은 모든 것을 지우고 현재를 지정하거나,

특정 요소에 대한 특정 동작을 지정하는 것입니다.

4. 프론트엔드 초보자로서 IT 블로그 커뮤니케이션에 참여할 수 있다는 것은 매우 즐거운 일입니다. 계속해서 글을 쓸 수 있기를 바랍니다. 물론 각계각층의 전문가들이 저를 시정해 주셨으면 좋겠습니다. 정말 감사합니다!

5. 이전 블로그는 시나 블로그에 게시되어 있으므로 링크를 클릭하면 블로그 내용이 csnd로 마이그레이션된 후 이전 사진을 여러 개 클릭하면 자동으로 시나 블로그로 이동됩니다! csdn에 와서 여러분의 회원이 된 것을 매우 기쁘게 생각합니다!

관련 권장사항:

jquery_jquery를 기반으로 한 아코디언 이미지 표시 효과 구현 방법

위 내용은 아코디언 그림 전환 케이스의 JavaScript 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!