为了账号安全,请及时绑定邮箱和手机立即绑定

手风琴效果

难度初级
时长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;}
    查看全部
  • 超出的部分隐藏(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;}
    查看全部
  • 用 ul li 元素通过左浮动来实现并排显示的列表
    查看全部
    0 采集 收起 来源:练习题

    2016-04-03

  • 通过设置一个遮罩层的透明度来实现改变某个元素的明暗度
    查看全部
    1 采集 收起 来源:练习题

    2016-04-03

  • <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

  • 手风琴效果
    查看全部
  • 绑定事件函数 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); } }
    查看全部
  • html里面link、script 标签的href地址写错了,要改下,还有css里的透明度~
    查看全部
    2 采集 收起 来源:实战题

    2015-11-18

  • 待完成的效果
    查看全部
    0 采集 收起 来源:综合实战题

    2015-10-22

  • 要再看看的
    查看全部
    0 采集 收起 来源:实战题

    2015-10-22

  • 腾讯视频的一个效果也是类似的
    查看全部
  • 回调函数事件的触发者
    查看全部
  • 【虚线的实现方法】 .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;} 遮罩层的宽度和高度与列表项的宽高一样,设置背景色和透明度。
    查看全部
  • 让图片位置在右下角:bottom:0;right:0; 让图片位置在左上角:top:0;left:0
    查看全部

举报

0/150
提交
取消
课程须知
1.HTML中无序列表的相关知识 2.掌握CSS样式的内容,尤其是CSS3的基础内容 3.对JavaScript中鼠标事件等知识熟悉
老师告诉你能学到什么?
1.浮动布局的相关知识 2.掌握CSS3的transition属性 3.会用代码实现手风琴效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!