仿6room网站图片链接效果.doc

仿6room图片链接效果-唐国辉 80万网民追捧全球最性感女主播根据韩寒作品改编电视剧三重门CG少女（3维立体,比真人还漂亮）一、实例实现功能介绍默认情况下，一个带有一定边框的图片链接放置在网页中，图片链接左下角还有一个“+”图形，意为添加到收藏夹或者视频播放列表吧（我这里没 有加入脚本，只讲界面的实现），当鼠标移到链接图片区域上面时，会出现一个半透明链接简要说明层盖在图片上面，说明层的文字前边还有一个小的网站 LOGO，说明层周围还会跟着出现一条黄色的边框，同时鼠标移到左下角“+”图形上，它的颜色会发生变化，而且像这样的结构一旦做好了，就可以随意在网页 上任意地方安排它们位置，效果不会发生改变。下面是实例效果截图。实例效果截图二、结构和样式代码1结构 80万网民追捧全球最性感女主播 根据韩寒作品改编电视剧三重门CG少女（3维立体,比真人还漂亮）根据韩寒作品改编电视剧三重门CG少女（3维立体,比真人还漂亮）根据韩寒作品改编电视剧三重门CG少女（3维立体,比真人还漂亮）2样式* margin:0px; padding:0px;body margin:20px; font-size: 12px; line-height:18px;.blueidea background-color: #CCC; margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/ padding: 3px;/*形成边框装饰，同时等一下也方便控制其子元素位置,所以我没有用BORDER*/ height: 96px;/*与图片等高*/ width: 128px; position: relative; float:left;/*让三个实例横向排列*/.blueidea a img height: 96px; width: 128px; border:none;.blueidea a span margin-top:-9000px;/*初始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/ margin-left:-9000px; position: absolute;.blueidea a:hover background-color: #FFF;/*IE7以下版本A状态伪类bug*/.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(/cssImg/blueidea.gif) 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;/*重定位文字说明层回到正常位置*/.blueidea em position:absolute; left:5px; bottom:5px; width:25px; height:25px; cursor:pointer; background:url(/cssImg/blueidea1.gif) no-repeat;.blueidea em:hover background-image:url(/cssImg/blueidea2.gif) ;/*+图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/ 80万网民追捧全球最性感女主播 根据韩寒作品改编电视剧三重门CG少女（3维立体,比真人还漂亮）根据韩寒作品改编电视剧三重门CG少女（3维立体,比真人还漂亮）根据韩寒作品改编电视剧三重门CG少女（3维立体,比真人还漂亮）2样式* margin:0px; padding:0px;body margin:20px; font-size: 12px; line-height:18px;.blueidea background-color: #CCC; margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/ padding: 3px;/*形成边框装饰，同时等一下也方便控制其子元素位置,所以我没有用BORDER*/ height: 96px;/*与图片等高*/ width: 128px; position: relative; float:left;/*让三个实例横向排列*/.blueidea a img height: 96px; width: 128px; border:none;.blueidea a span margin-top:-9000px;/*初始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/ margin-left:-9000px; position: absolute;.blueidea a:hover background-color: #FFF;/*IE7以下版本A状态伪类bug*/.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(/cssImg/blueidea.gif) 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;/*重定位文字说明层回到正常位置*/.blueidea em position:absolute; left:5px; bottom:5px; width:25px; height:25px; cursor:pointer; background:url(/cssImg/blueidea1.gif) no-repeat;.blueidea em:hover background-image:url(/cssImg/blueidea2.gif) ;/*+图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/ 80万网民追捧全球最性感女主播 根据韩寒作品改编电视剧三重门CG少女（3维立体,比真人还漂亮）根据韩寒作品改编电视剧三重门CG少女（3维立体,比真人还漂亮）根据韩寒作品改编电视剧三重门CG少女（3维立体,比真人还漂亮）2样式* margin:0px; padding:0px;body margin:20px; font-size: 12px; line-height:18px;.blueidea background-color: #CCC; margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/ padding: 3px;/*形成边框装饰，同时等一下也方便控制其子元素位置,所以我没有用BORDER*/ height: 96px;/*与图片等高*/ width: 128px; position: relative; float:left;/*让三个实例横向排列*/.blueidea a img height: 96px; width: 128px; border:none;.blueidea a span margin-top:-9000px;/*初始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/ margin-left:-9000px; position: absolute;.blueidea a:hover background-color: #FFF;/*IE7以下版本A状态伪类bug*/.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(/cssImg/blueidea.gif) 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;/*重定位文字说明层回到正常位置*/.blueidea em position:absolute; left:5px; bottom:5px; width:25px; height:25px; cursor:pointer; background:url(/cssImg/blueidea1.gif) no-repeat;.blueidea em:hover background-image:url(/cssImg/blueidea2.gif) ;/*+图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/三、分析实现方法 此实例效果一定会用到层的叠加和相对、绝对定位，而且要应用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(/cssImg/blueidea.gif) 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定位“+”图形，这里我们要注意一点是，不要把它也安排在内，因为测试表明 它是可以独立响应的，不是与文字说明层一起响应的。这里我用到背景的变换效果，但是这个效果只能在像FF这样的标准浏览器中生效，这是因为IE7以下版本 A状态伪类bug缘故，当然IE7是支持的了，IE现在已逐渐向标准靠拢了，这可是标准网页设计者的福音。这里用到样式：.blueidea em position:absolute; left:5px; bottom:5px; width:25px; height:25px; cursor:pointer; background:url(/cssImg/blueidea1.gif) no-repeat;.blueidea em:hover background-image:url(/cssImg/blueidea2.gif) ;/*+图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/6解决IE7以下版本A状态伪类bug，加入一条如下样式：.blueidea a:hover background-color: #FFF;/*IE7以下版本A状态伪类bug*/四、不足此实例的不足是图片左下角的“+”图形变换效果在IE7以下版本浏览器中失效，本人还没有想到较好的解决办法，因为我的 要求是：只能纯CSS实现，尽量少用样式代码，同时保证做出来的实例不随它在网页中出现位置的变化而改变，这样“+”元素一定会用到绝对定位，同时其父级 采用相对定位，而且要让这种背景变换效果在IE7以下版本生效，只能用A标签，现在问题是父元素内已出现一次A了，那么在样式控制时又会出现样式的继承作 用，从而导致效果变乱，如果你能有更好的实现方法一定要记得写出来与大家分享哦。源码下载：此实例效果一定会用到层的叠加和相对、绝对定位，而且要应用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(/cssImg/blueidea.gif) 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定位“+”图形，这里我们要注意一点是，不要把它也安排在内，因为测试表明 它是可以独立响应的，不是与文字说明层一起响应的。这里我用到背景的变换效果，但是这个效果只能在像FF这样的标准浏览器中生效，这是因为IE7以下版本 A状态伪类bug缘故，当然IE7是支持的了，IE现在已逐渐向标准靠拢了，这可是标准网页设计者的福音。这里用到样式：.blueidea em position:absolute; left:5px; bottom:5px; width:25px; height:25px; cursor:pointer; background:url(/cssImg/blueidea1.gif) no-repeat;.blueidea em:hover background-image:url(/cssImg/blueidea2.gif) ;/*+图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/6解决IE7以下版本A状态伪类bug，加入一条如下样式：.blueidea a:hover background-color: #FFF;/*IE7以下版本A状态伪类bug*/四、不足此实例的不足是图片左下角的“+”图形变换效果在IE7以下版本浏览器中失效，本人还没有想到较好的解决办法，因为我的 要求是：只能纯CSS实现，尽量少用样式代码，同时保证做出来的实例不随它在网页中出现位置的变化而改变，这样“+”元素一定会用到绝对定位，同时其父级 采用相对定位，而且要让这种背景变换效果在IE7以下版本生效，只能用A标签，现在问题是父元素内已出现一次A了，那么在样式控制时又会出现样式的继承作 用，从而导致效果变乱，如果你能有更好的实现方法一定要记得写出来与大家分享哦。源码下载：此实例效果一定会用到层的叠加和相对、绝对定位，而且要应用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(/cssImg/blueidea.gif) no-repeat 5px 10px;/*LOGO图片定位*/ text-indent: 28px;/*文本缩进28px,避免与背景LOGO叠加*/ filter:alpha(opacity=90);/*CSS透明度滤镜*/ opacity:0.9;/*针对Mozilla浏览器CSS透明