javascript实现手风琴图片切换案例

小云云
Lepaskan: 2023-03-21 13:22:01
asal
1334 orang telah melayarinya

本文主要和大家分享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;;
    });
} 
})();
Salin selepas log masuk

3. html,css有可能会很乱,但是其核心实现就是上述的简单几句js逻辑语句处理完成,在我看来该案例其编程的最要的核心思想就是清空所有,指定当前,

或者指定特定元素特定行为。

4. 作为一名前端小白,能够融入IT博客交流是一种非常愉快的事情,希望我能坚持下去,不断地写下去。当然也希望各界大神指正,万分感谢!

5. 由于之前的博客都是在新浪博客上发表: 点击打开链接 ,所以在博客内容迁移到csnd后,前面好多图片点击进去会自动跳转到新浪博客!很开心来到csdn,成为大家的一员!

相关推荐:

基于jquery的手风琴图片展示效果实现方法_jquery

Atas ialah kandungan terperinci javascript实现手风琴图片切换案例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!