手风琴效果_学习笔记

首页免费课手风琴效果笔记

手风琴效果

                
                mark
            Web前端工程师

                    查看讲师更多课程 
                    mark讲师的其他课程
                
Web App下图片滑动组件的开发
中级·39567
免费课程
                                
                难度初级
            
                时长35分
            
                学习人数
            
综合评分9.43
                            122人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.3
                                简洁易懂
                            
                                9.2
                                逻辑清晰

最热最新

霜花似雪

DOM.attechEvent('onclick', callback)为标准浏览器绑定事件。 DOM.bind('click', callback) DOM.addEventListener('click', callback, false) DOM.on('click', callback) 以上为jquery 的绑定事件方法

查看全部

0 采集收起来源：练习题
2016-04-03
霜花似雪

元素的明暗度是控制遮罩层的透明度实现的。 .wrapper:hover .mask { opacity:0.15;} 鼠标悬停的列表项：.wrapper li.big a:hover .mask { opacity:0;}

查看全部

0 采集收起来源：用CSS设置图片明暗度的变化
2016-04-03
霜花似雪

超出的部分隐藏（overflow:hidden）超出的部分显示（overflow:visible）隐藏元素(display:none) 视觉隐藏元素(visibility:hidden) .line { position:absolute; right:0px; width:0px;height:128px;border:1px dashed #ccc;} 由于只需要虚线边框的效果，故该元素的宽度为0。【遮罩层】明暗度 .mask { position:absolute; top:0px; left:0px; height:128px; width:156px; opacity:0.15;} opacity 表示透明度【虚线的实现方法】 .line { position:absolute; right:0px; width:0px;height:128px;border:1px dashed #ccc;} 由于只需要虚线边框的效果，故该元素的宽度为0。【遮罩层】 .mask { position:absolute; top:0px; left:0px; height:128px; width:156px; opacity:0; background:#000;} 遮罩层的宽度和高度与列表项的宽高一样，设置背景色和透明度。为处于展开状态的列表项设置class，单独写效果。让为展开的图片超出列表项一点。img { right:-15px;}

查看全部

0 采集收起来源：用CSS实现手风琴效果页面样式
2016-04-03
霜花似雪

用 ul li 元素通过左浮动来实现并排显示的列表

查看全部

0 采集收起来源：练习题
2016-04-03
霜花似雪

通过设置一个遮罩层的透明度来实现改变某个元素的明暗度

查看全部

1 采集收起来源：练习题
2016-04-03
超超_vip

<script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('imageMenu'); var oLi=oDiv.getElementsByTagName('li'); for(var i=0;i<oLi.length;i++){ oLi[i].index=i; oLi[i].onmouseover=function(){ for(var i=0;i<oLi.length;i++){ var str=oLi[i].className; var regExp=/big/ig; if(regExp.test(str)){ str=str.slice(4); oLi[i].className=str; } } this.className='big '+this.className; } } } </script> 老师代码简化

查看全部

0 采集收起来源：综合实战题
2018-03-22
qq_盖世英雄_2 01:06

手风琴效果

查看全部

0 采集收起来源：案例展示及实现原理分析
2016-03-19
Amy1234567

绑定事件函数 function bind(el,eventType,callback){ if(typeof el.addEventListener ==='function'){ el.addEventListener(el,eventType,callback,false); }else if(typeof el.attachEvent ==='function'){ el.attachEvent('on'+eventType,callback); } }

查看全部

0 采集收起来源：用JavaScript实现手风琴效果
2016-02-05
Plus_Happy2

html里面link、script 标签的href地址写错了，要改下，还有css里的透明度~

查看全部

2 采集收起来源：实战题
2015-11-18
shine315

待完成的效果

查看全部

0 采集收起来源：综合实战题
2015-10-22
shine315

要再看看的

查看全部

0 采集收起来源：实战题
2015-10-22
慕慕4567899 00:44

腾讯视频的一个效果也是类似的

查看全部

0 采集收起来源：案例展示及实现原理分析
2015-10-08
ProvenKing 05:18

回调函数事件的触发者

查看全部

0 采集收起来源：用JavaScript实现手风琴效果
2015-09-14
code前端

【虚线的实现方法】 .line { position:absolute; right:0px; width:0px;height:128px;border:1px dashed #ccc;} 由于只需要虚线边框的效果，故该元素的宽度为0。【遮罩层】 .mask { position:absolute; top:0px; left:0px; height:128px; width:156px; opacity:0; background:#000;} 遮罩层的宽度和高度与列表项的宽高一样，设置背景色和透明度。

查看全部

0 采集收起来源：用CSS实现手风琴效果页面样式
2015-08-26
spring_summer

让图片位置在右下角：bottom:0;right:0; 让图片位置在左上角：top:0;left:0

查看全部

0 采集收起来源：用CSS实现手风琴效果页面样式
2015-08-26