鸿 网 互 联 www.68idc.cn

仿6room站点图片链接效果(二)

来源:互联网 作者:佚名 时间:2016-04-08 07:54
本文示例源代码或素材下载 三、分析实现要领 此实例效果一定会用到层的叠加和相对、绝对定位,而且要运用CSS透明度滤镜,这是应该首先会想到的。它的原理是让两个层完美吻合的叠加,一个层默认时潜藏掉,用鼠标事件触发显示,另外左下角的+图形默认情况没有

  本文示例源代码或素材下载
  三、分析实现要领
  此实例效果一定会用到层的叠加和相对、绝对定位,而且要运用 CSS透明度滤镜,这是应该首先会想到的。它的原理是让两个层完美吻合的叠加,一个层默认时潜藏 掉,用鼠标事件触发显示,另外左下角的“+”图形默认情况没有潜藏 掉,要把它独立出来处理。
  1.默认情况下,如果里面的大图片没有下载完,会有一块灰色的色块,图形下载完了,在图片四周会有灰色的边界,所以在这里组织一个有3px填充的大盒子,内容区块大小与图片大小相等,加上灰色的背景,配置 其定位方式为相对定位,等一下其内部元素就可以以它为参考执行 绝对定位,所以用到下面样式:
.blueidea {
background-color: #CCC;
margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/
padding: 3px;/*形成边框装饰,同时等一下也方便控制其子元素位置,所以我没有用BORDER*/
height: 96px;/*与图片等高*/
width: 128px;
position: relative;
float:left;/*让三个实例横向排列*/
}

  2.限定图片大小,并不显示边框,用到下面样式:
.blueidea a img {
height: 96px;
width: 128px;
border:none;
}

  3.组织文字说明图层,让其大小比下层稍小(因为我安排了1px的边框),在这个盒子内,让其上边有一定填充(不要用边界,因为我们等一下要用到半透明效果,这个效果是覆盖下面整个区域的),让文字说明不会靠着上边,再让文字缩进一段距离,主要是为了方便等一下对LOGO做背景精确定位到文字说明前,文字不会与LOGO重叠在一起。(在做的时候可以多次精细调节,直至达到满意为止)。接着为这一图层加上个半透明滤镜效果,并重新给出一个margin值,等一下我们要用这种要领 来原始化说明图层移出可视区域。用到下面样式:
.blueidea a:hover span {
height: 88px;
width: 128px;
position: absolute;
left: 0px;
top: 0px;
border:1px solid #F90;
padding: 10px 2px 2px 2px;/*让说明文字不要太靠上边界*/
background:#FFF url() no-repeat 5px 10px;/*LOGO图片定位*/
text-indent: 28px;/*文本缩进28px,防止 与背景LOGO叠加*/
filter:alpha(opacity=90);/*CSS透明度滤镜*/
opacity:0.9;/*针对Mozilla阅读 器CSS透明度滤镜*/
display: block;
text-decoration: none;/*去除说明文字链接下划线*/
cursor:pointer; /*让光标显示手形*/
margin:0px;/*重定位文字说明层回到正常位置*/
}

4.潜藏 说明图层,这里用到margin无限大负值来把元素移出可视区域,我们把这一步放在后面做,不然一开始把它移出去了,你如何 在做的流程 中看文字说明层能不能 与下一层吻合好,是吧。这里用到样式:
.blueidea a span {
margin-top:-9000px;/*原始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/
margin-left:-9000px;
position: absolute;
}

  5.定位“+”图形,这里我们要留心 一点是,不要把它也安排在<a></a>内,因为测试表明它是可以独立响应的,不是与文字说明层一起响应的。这里我用到背景的变换效果,但是这个效果只能在像FF这样的标准阅读 器中生效,这是因为IE7以下版本A状态伪类bug缘故,当然IE7是支持的了,IE现在已逐渐向标准靠拢了,这可是标准网页设计者的福音。这里用到样式:
.blueidea em {
position:absolute;
left:5px;
bottom:5px;
width:25px;
height:25px;
cursor:pointer;
background:url() no-repeat;
}
.blueidea em:hover {
background-image:url() ;/*"+"图片鼠标滑过背景变换,只有标准阅读 器起作用,IE7以下版本BUG*/
}

6.处理 IE7以下版本A状态伪类bug,加入一条如下样式:

.blueidea a:hover {
background-color: #FFF;/*IE7以下版本A状态伪类bug*/
}

  四、不足
  此实例的不足是图片左下角的“+”图形变换效果在IE7以下版本阅读 器中失效,本人还没有想到较好的处理 办法,因为我的要求是:只能纯CSS实现,尽量少用样式代码,同时保证做出来的实例不随它在网页中出现位置的变化而改动 ,这样“+”元素一定会用到绝对定位,同时其父级采用相对定位,而且要让这种背景变换效果在IE7以下版本生效,只能用A标签,现在疑问 是父元素内已出现一次A了,那么在样式控制时又会出现样式的继承作用,从而导致效果变乱,如果你能有更好的实现要领 一定要记得写出来与大家分享哦。
源码下载:demo.rar
  此实例效果一定会用到层的叠加和相对、绝对定位,而且要运用 CSS透明度滤镜,这是应该首先会想到的。它的原理是让两个层完美吻合的叠加,一个层默认时潜藏 掉,用鼠标事件触发显示,另外左下角的“+”图形默认情况没有潜藏 掉,要把它独立出来处理。
  1.默认情况下,如果里面的大图片没有下载完,会有一块灰色的色块,图形下载完了,在图片四周会有灰色的边界,所以在这里组织一个有3px填充的大盒子,内容区块大小与图片大小相等,加上灰色的背景,配置 其定位方式为相对定位,等一下其内部元素就可以以它为参考执行 绝对定位,所以用到下面样式:
.blueidea {
background-color: #CCC;
margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/
padding: 3px;/*形成边框装饰,同时等一下也方便控制其子元素位置,所以我没有用BORDER*/
height: 96px;/*与图片等高*/
width: 128px;
position: relative;
float:left;/*让三个实例横向排列*/
}

  2.限定图片大小,并不显示边框,用到下面样式:
.blueidea a img {
height: 96px;
width: 128px;
border:none;
}

  3.组织文字说明图层,让其大小比下层稍小(因为我安排了1px的边框),在这个盒子内,让其上边有一定填充(不要用边界,因为我们等一下要用到半透明效果,这个效果是覆盖下面整个区域的),让文字说明不会靠着上边,再让文字缩进一段距离,主要是为了方便等一下对LOGO做背景精确定位到文字说明前,文字不会与LOGO重叠在一起。(在做的时候可以多次精细调节,直至达到满意为止)。接着为这一图层加上个半透明滤镜效果,并重新给出一个margin值,等一下我们要用这种要领 来原始化说明图层移出可视区域。用到下面样式:
.blueidea a:hover span {
height: 88px;
width: 128px;
position: absolute;
left: 0px;
top: 0px;
border:1px solid #F90;
padding: 10px 2px 2px 2px;/*让说明文字不要太靠上边界*/
background:#FFF url() no-repeat 5px 10px;/*LOGO图片定位*/
text-indent: 28px;/*文本缩进28px,防止 与背景LOGO叠加*/
filter:alpha(opacity=90);/*CSS透明度滤镜*/
opacity:0.9;/*针对Mozilla阅读 器CSS透明度滤镜*/
display: block;
text-decoration: none;/*去除说明文字链接下划线*/
cursor:pointer; /*让光标显示手形*/
margin:0px;/*重定位文字说明层回到正常位置*/
}

4.潜藏 说明图层,这里用到margin无限大负值来把元素移出可视区域,我们把这一步放在后面做,不然一开始把它移出去了,你如何 在做的流程 中看文字说明层能不能 与下一层吻合好,是吧。这里用到样式:
.blueidea a span {
margin-top:-9000px;/*原始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/
margin-left:-9000px;
position: absolute;
}

  5.定位“+”图形,这里我们要留心 一点是,不要把它也安排在<a></a>内,因为测试表明它是可以独立响应的,不是与文字说明层一起响应的。这里我用到背景的变换效果,但是这个效果只能在像FF这样的标准阅读 器中生效,这是因为IE7以下版本A状态伪类bug缘故,当然IE7是支持的了,IE现在已逐渐向标准靠拢了,这可是标准网页设计者的福音。这里用到样式:
.blueidea em {
position:absolute;
left:5px;
bottom:5px;
width:25px;
height:25px;
cursor:pointer;
background:url() no-repeat;
}
.blueidea em:hover {
background-image:url() ;/*"+"图片鼠标滑过背景变换,只有标准阅读 器起作用,IE7以下版本BUG*/
}

  6.处理 IE7以下版本A状态伪类bug,加入一条如下样式:
.blueidea a:hover {
background-color: #FFF;/*IE7以下版本A状态伪类bug*/
}

  四、不足
  此实例的不足是图片左下角的“+”图形变换效果在IE7以下版本阅读 器中失效,本人还没有想到较好的处理 办法,因为我的要求是:只能纯CSS实现,尽量少用样式代码,同时保证做出来的实例不随它在网页中出现位置的变化而改动 ,这样“+”元素一定会用到绝对定位,同时其父级采用相对定位,而且要让这种背景变换效果在IE7以下版本生效,只能用A标签,现在疑问 是父元素内已出现一次A了,那么在样式控制时又会出现样式的继承作用,从而导致效果变乱,如果你能有更好的实现要领 一定要记得写出来与大家分享哦。
源码下载:demo.rar
  此实例效果一定会用到层的叠加和相对、绝对定位,而且要运用 CSS透明度滤镜,这是应该首先会想到的。它的原理是让两个层完美吻合的叠加,一个层默认时潜藏 掉,用鼠标事件触发显示,另外左下角的“+”图形默认情况没有潜藏 掉,要把它独立出来处理。
  1.默认情况下,如果里面的大图片没有下载完,会有一块灰色的色块,图形下载完了,在图片四周会有灰色的边界,所以在这里组织一个有3px填充的大盒子,内容区块大小与图片大小相等,加上灰色的背景,配置 其定位方式为相对定位,等一下其内部元素就可以以它为参考执行 绝对定位,所以用到下面样式:
.blueidea {
background-color: #CCC;
margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/
padding: 3px;/*形成边框装饰,同时等一下也方便控制其子元素位置,所以我没有用BORDER*/
height: 96px;/*与图片等高*/
width: 128px;
position: relative;
float:left;/*让三个实例横向排列*/
}

  2.限定图片大小,并不显示边框,用到下面样式:
.blueidea a img {
height: 96px;
width: 128px;
border:none;
}

  3.组织文字说明图层,让其大小比下层稍小(因为我安排了1px的边框),在这个盒子内,让其上边有一定填充(不要用边界,因为我们等一下要用到半透明效果,这个效果是覆盖下面整个区域的),让文字说明不会靠着上边,再让文字缩进一段距离,主要是为了方便等一下对LOGO做背景精确定位到文字说明前,文字不会与LOGO重叠在一起。(在做的时候可以多次精细调节,直至达到满意为止)。接着为这一图层加上个半透明滤镜效果,并重新给出一个margin值,等一下我们要用这种要领 来原始化说明图层移出可视区域。用到下面样式:
.blueidea a:hover span {
height: 88px;
width: 128px;
position: absolute;
left: 0px;
top: 0px;
border:1px solid #F90;
padding: 10px 2px 2px 2px;/*让说明文字不要太靠上边界*/
background:#FFF url() no-repeat 5px 10px;/*LOGO图片定位*/
text-indent: 28px;/*文本缩进28px,防止 与背景LOGO叠加*/
filter:alpha(opacity=90);/*CSS透明度滤镜*/
opacity:0.9;/*针对Mozilla阅读 器CSS透明度滤镜*/
display: block;
text-decoration: none;/*去除说明文字链接下划线*/
cursor:pointer; /*让光标显示手形*/
margin:0px;/*重定位文字说明层回到正常位置*/
}

4.潜藏 说明图层,这里用到margin无限大负值来把元素移出可视区域,我们把这一步放在后面做,不然一开始把它移出去了,你如何 在做的流程 中看文字说明层能不能 与下一层吻合好,是吧。这里用到样式:
.blueidea a span {
margin-top:-9000px;/*原始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/
margin-left:-9000px;
position: absolute;
}

  5.定位“+”图形,这里我们要留心 一点是,不要把它也安排在<a></a>内,因为测试表明它是可以独立响应的,不是与文字说明层一起响应的。这里我用到背景的变换效果,但是这个效果只能在像FF这样的标准阅读 器中生效,这是因为IE7以下版本A状态伪类bug缘故,当然IE7是支持的了,IE现在已逐渐向标准靠拢了,这可是标准网页设计者的福音。这里用到样式:
.blueidea em {
position:absolute;
left:5px;
bottom:5px;
width:25px;
height:25px;
cursor:pointer;
background:url() no-repeat;
}
.blueidea em:hover {
background-image:url() ;/*"+"图片鼠标滑过背景变换,只有标准阅读 器起作用,IE7以下版本BUG*/
}

6.处理 IE7以下版本A状态伪类bug,加入一条如下样式:

.blueidea a:hover {
background-color: #FFF;/*IE7以下版本A状态伪类bug*/
}

  四、不足
  此实例的不足是图片左下角的“+”图形变换效果在IE7以下版本阅读 器中失效,本人还没有想到较好的处理 办法,因为我的要求是:只能纯CSS实现,尽量少用样式代码,同时保证做出来的实例不随它在网页中出现位置的变化而改动 ,这样“+”元素一定会用到绝对定位,同时其父级采用相对定位,而且要让这种背景变换效果在IE7以下版本生效,只能用A标签,现在疑问 是父元素内已出现一次A了,那么在样式控制时又会出现样式的继承作用,从而导致效果变乱,如果你能有更好的实现要领 一定要记得写出来与大家分享哦。
系列文章:
  仿6room站点 图片链接效果(一)

  

网友评论
<