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

图片展示特效

难度初级
时长47分
学习人数
综合评分9.53
97人评价 查看评价
9.7 内容实用
9.5 简洁易懂
9.4 逻辑清晰
  • 1、名词术语:作用域。比如: div1.style.top=160+"px"; div2.style.top=160+"px"; 它们的作用域分别是div1和div2 2、console.log(); 说明:小括号内传想要显示的内容 作用:浏览器控制台输出日志,用来调试程序 3、在这里函数的两种写法: oDiv.onmouseover = showAtop(); oDiv.onmouseover = showAtop; 注意:这里showAtop是一个函数,这两种写法都正确,因为函数后面的小括号是可以省略的 4、定义完函数showMeg,如果想让3个div每个都有效果,可以调用函数写: showMeg(1); showMeg(2); showMeg(3);
    查看全部
    1 采集 收起 来源:代码优化

    2018-03-22

  • div1.onmouseover=function(){ div1.getElementsByTagName('a')[0].style.top=0; } div1.onmouseout=function(){ div1.getElementsByTagName('a')[0].style.top=160; } ●对于等号后面的值的写法 正确写法1: oBox1.getElementsByTagName("a")[0].style.top=0; oBox1.getElementsByTagName("a")[0].style.top=160+"px"; 正确写法2: oBox1.getElementsByTagName("a")[0].style.top="0"; oBox1.getElementsByTagName("a")[0].style.top="160px"; 错误写法1: oBox1.getElementsByTagName("a")[0].style.top=160px; 错误写法2: oBox1.getElementsByTagName("a")[0].style.top=160;
    查看全部
    0 采集 收起 来源:图片展示制作

    2018-03-22

  • 块状元素 一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。常见块状元素为div和p。 内联元素 内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度(width)高度(height)不起作用。常见内联元素为“a”。 做了个对比表,帮助大家更容易理解。 内联元素的宽度(width)高度(height)不起作用,它的大小只随内部文本或者其他内联元素变化 1、布局: <div id="pic1"> <img src="" /> <a href="#" > 描述文字 </a> </div> 2、CSS样式: ▲ 对div ①相对定位 ②overflow:hidden ▲ a标签绝对定位 3、效果实现需要:当鼠标放到div上时即#pic1:hover,让a标签的top:0px;
    查看全部
    0 采集 收起 来源:简介与原理

    2018-03-22

  • Opacity设置透明度,取值为0-100。 . filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认 . -moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当于设置半透明为50% . opacity:对除IE外所有浏览器支持包括谷歌,放最后主要针对谷歌浏览器,opacity: 0.5;表示设置50%半透明
    查看全部
    0 采集 收起 来源:练习题

    2015-07-03

  • hello world...
    查看全部
    0 采集 收起 来源:编程练习

    2015-07-02

  • http://img1.sycdn.imooc.com//5516077700017ea412000530-156-88.jpg
    查看全部
  • 一、利用div+css对图片进行布局(41行代码注释) 提示:图片信息层<a>属性top值的设置 二、利用for循环思路配合定位完成图片信息显示及隐藏效果(82、88、95行代码注释) 提示: 1.用for语句去循环每一个元素,当前元素触发onmouseover及onmouseout事件 2.事件里去处理top的值,达到想要的效果 扩展:可以动手试验,如果信息提示层是从左侧向右显示及隐藏,该如何实现呢?
    查看全部
    1 采集 收起 来源:编程练习

    2018-03-22

  • CSS样式中设置filter:alpha(Opacity=50);实现半透明颜色效果? Opacity设置透明度,取值为0-100。 . filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认 . -moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当于设置半透明为50% . opacity:对除IE外所有浏览器支持包括谷歌,放最后主要针对谷歌浏览器,opacity: 0.5;表示设置50%半透明
    查看全部
    0 采集 收起 来源:练习题

    2015-06-16

  • 设置背景半透明: filter:alpha(opacity=50);为IE6设置,取值范围0-100 -moz-opacity:0.5;取值范围0-1;老版本的Firefox。 -khtml-opacity:0.5;使用KHTML内核而不是webkit内核的Safari -webkit-opacity:0.5;旧Safari,Chrome; opacity:0.5;它是CSS标准,该属性Firefox,Safari和Opera都支持。
    查看全部
    0 采集 收起 来源:简单展示效果

    2015-06-13

  • Opacity设置透明度,取值为0-100。 . filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认 . -moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当于设置半透明为50% . opacity:对除IE外所有浏览器支持包括谷歌,放最后主要针对谷歌浏览器,opacity: 0.5;表示设置50%半透明
    查看全部
    0 采集 收起 来源:练习题

    2015-06-12

  • 多层排列
    查看全部
    0 采集 收起 来源:编程练习

    2015-06-07

  • 记住多尝试
    查看全部
    0 采集 收起 来源:编程练习

    2015-06-07

  • 解析 Opacity设置透明度,取值为0-100。 . filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认 . -moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当于设置半透明为50% . opacity:对除IE外所有浏览器支持包括谷歌,放最后主要针对谷歌浏览器,opacity: 0.5;表示设置50%半透明
    查看全部
    0 采集 收起 来源:练习题

    2015-06-07

  • 兼容性浏览器的透明度设置
    查看全部
    0 采集 收起 来源:简单展示效果

    2015-06-07

  • Opacity设置透明度,取值为0-100。 . filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认 . -moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当于设置半透明为50% . opacity:对除IE外所有浏览器支持包括谷歌,放最后主要针对谷歌浏览器,opacity: 0.5;表示设置50%半透明
    查看全部
    0 采集 收起 来源:练习题

    2015-05-31

举报

0/150
提交
取消
课程须知
1. 您至少具备HTML/CSS基础知识。 2. 您至少具备JavaScript基础知识。
老师告诉你能学到什么?
1. 理解各种展示效果的原理; 2. 灵活运用position定位属性,实现位置的变化; 3. 掌握for 和 while 循环语句使用方法; 4. 兼容不同浏览器,设置透明属性; 5. 多种方法实现效果,并对代码进行逐步优化。

微信扫码,参与3人拼团

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

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