javascript實作手風琴圖片切換案例

小云云
發布: 2023-03-21 13:22:01
原創
1341 人瀏覽過

本文主要和大家分享javascript實現手風琴圖片切換案例,希望能幫助到大家, 首先觀看切換效果:

1. 切換效果:



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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板