仿6room网站图片链接效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是仿6room网站图片链接效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,图片特效,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为仿6room网站图片链接效果，属于站长常用代码" />
<title>仿6room网站图片链接效果</title>
<style type="text/css">
<!--
*{
	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(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(blueidea1.gif) no-repeat;
}
.blueidea em:hover { 
	background-image:url(blueidea2.gif) ;/*"+"图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/
}
-->
</style>
</head>

<body>
<table width="728" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><div class="blueidea"><a href="#"><img  src="pic1.jpg" alt="" /><span> 80万网民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div>
      <div class="blueidea"><a href="#"><img  src="pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>
    <div class="blueidea"><a href="#"><img  src="pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div></td>
  </tr>
</table>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)