javascript实现手风琴图片切换案例
程序员文章站
2024-02-01 14:52:10
...
本文主要和大家分享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 + 'px'; contents[j].style.transition = '0s'; contents[j].style.opacity = 0; aSpan[j].style.opacity = 1; } //盒子 items[this.index].style.width = 160 + 'px'; //当前点击块 this.style.opacity = 0; } } //运动结束事件监听 for(var i=0;i<items.length;i++) { items[i].num = i; items[i].addEventListener('transitionend', function(ev){ console.log(clickIndex); contents[clickIndex].style.transition = '.8s'; contents[clickIndex].style.opacity = '1'; }); } })();
3. html,css有可能会很乱,但是其核心实现就是上述的简单几句js逻辑语句处理完成,在我看来该案例其编程的最要的核心思想就是清空所有,指定当前,
或者指定特定元素特定行为。
4. 作为一名前端小白,能够融入IT博客交流是一种非常愉快的事情,希望我能坚持下去,不断地写下去。当然也希望各界大神指正,万分感谢!
5. 由于之前的博客都是在新浪博客上发表: 点击打开链接 ,所以在博客内容迁移到csnd后,前面好多图片点击进去会自动跳转到新浪博客!很开心来到csdn,成为大家的一员!
相关推荐:
以上就是javascript实现手风琴图片切换案例的详细内容,更多请关注其它相关文章!
上一篇: 使用C#对MongoDB中的数据进行查询,修改等操作
下一篇: 前端基础之HTML
推荐阅读
-
javascript实现手风琴图片切换案例
-
JS+CSS实现淡入式焦点图片幻灯切换效果的方法_javascript技巧
-
javascript - 淘宝或者京东中,在图片列表中,图片的原始尺寸都一样,是怎么实现的?
-
利用JS实现点击按钮后图片自动切换的简单方法
-
js实现单一html页面两套css切换代码_javascript技巧
-
锚点实现图片切换
-
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
-
基于WebUploader实现单图片和多图片上传,上传回显,编辑加载,图片删除,位置切换以及基于PhotoSwipe框架的图片预览功能
-
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
-
JavaScript 禁止用户保存图片的实现代码