アコーディオン画像切り替えケースのJavaScript実装

この記事では主に 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. 以前のブログは Sina ブログで公開されていたため、クリックしてリンクを開くと、ブログのコンテンツが csnd に移行された後、以前の多くの写真をクリックすると自動的に Sina ブログにジャンプします。 csdn に来て皆さんのメンバーになれることをとても嬉しく思います!

関連推奨事項:

jquery_jqueryに基づくアコーディオン画像表示エフェクトの実装方法

以上がアコーディオン画像切り替えケースのJavaScript実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。