CSS实现的一个图片放大展示的一种思路- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS实现的一个图片放大展示的一种思路

CSS样式表: 用div+css模拟表格对角线; 10个HTML和CSS代码修正IE6问题的方法; IE6因为编码问题无法正确解析CSS; 3G时代移动WEB设计资料WAP; 内联元素是什么意思呢？什么是块级别元素; 初学者需要知道WEB标准的前景; CSS网页布局id和class类的命名介绍; 快速定位到复杂的CSS BUG问题; 学完CSS后该学什么？; CSS实例:鼠标滑过文字超级链接背景变色; CSS教程:所有浏览器中都能正常显示的字体; 如何用css控制input中的text和radio; 浏览器处理网页字体效果对比; 网页制作学习:reflow概念; CSS样式表的hack的写作方法; CSS代码优化的两个原因; 解决父容器透明子容器不透明继承问题; 网页制作学习:reflow的问题; CSS实现透明效果颜色的方法:RGBa; DIV+CSS制作网页心得

No. « ‹ 55 56 57 58 › »

技术文章搜索

关键字

CSS样式表中的 CSS实现的一个图片放大展示的一种思路

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 111 ::

收藏到网摘: n/a

淘宝段正淳的css笔记大全又一实用的常用CSS缩写语法收集

这个用纯css实现的图片放大效果,真不错,看了以前有不少用纯css实现的图片放大效果的代码,都不理想,还是在这个好啊
看下面的HTML代码：
<div class="photo">
<ul>
<li><a href="#nogo1" class="hor"><img src=/upload/tech/20091012/20091012141325_68ce199ec2c5517597ce0a4d89620f55.gif alt="" title="" /><b>Snow capped mountains</b></a></li> </ul>
</div>
下面是CSS代码：

复制代码代码如下:

/* common styling */ 
a {color:#000;} 
a:hover {text-decoration:none;} 
a:visited {color:#000;} 
/* slides styling */ 
.photo {padding:20px; background:#222; width:600px; height:330px; text-align:left;} 
.photo h1 {font-size:14px; font-weight:normal; color:#fc0; margin:0 0 0 5px; padding:0;} 
.photo ul {list-style:none; padding:0; margin:0; width:216px; background:#333; border:1px solid #666; position:relative; height:144px;} 
.photo ul li {display:inline; width:24px; height:24px; float:left; margin:6px;} 
.photo ul li a {display:block; width:24px; height:24px; cursor:default; background:url(pics/arrow.gif) no-repeat;} 
.photo ul li a b {display:none;} 
.photo ul li a img {display:block; width:22px; height:22px; border:1px solid #666; border-top-color:#ccc;} 
.photo ul li a:hover {white-space:normal;position:relative;} 
.photo ul li a.vert:hover img {position:absolute; left:-12px; top:-20px; width:48px; height:64px; border-color:#fc0;} 
.photo ul li a.hor:hover img {position:absolute; left:-20px; top:-12px; width:64px; height:48px; border-color:#fc0;} 
.photo ul li a:active, .photo ul li a:focus {position:static; outline:0;} 
.photo ul li a:focus.vert img, .photo ul li a:active.vert img {background-color:#000; position:absolute; left:260px; top:0; width:240px; height:320px; border:1px solid #fc0; padding:5px 45px;} 
.photo ul li a:focus.hor img, .photo ul li a:active.hor img {background-color:#000; position:absolute; left:260px; top:0; width:320px; height:240px; border:1px solid #fc0; padding:45px 5px;} 
.photo ul li a:focus b, .photo ul li a:active b {display:block; position:absolute; width:204px; height:150px; border:1px solid #666; top:165px; left:0; color:#ddd; font-weight:normal; padding:6px;} 

看运行效果：

点击运行可以看到效果:

<!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" />
<title>www.52css.com</title>
<style type="text/css">
/* common styling */
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}
/* slides styling */
.photo {padding:20px; background:#222; width:600px; height:330px; text-align:left;}
.photo h1 {font-size:14px; font-weight:normal; color:#fc0; margin:0 0 0 5px; padding:0;}
.photo ul {list-style:none; padding:0; margin:0; width:216px; background:#333; border:1px solid #666; position:relative; height:144px;}
.photo ul li {display:inline; width:24px; height:24px; float:left; margin:6px;}
.photo ul li a {display:block; width:24px; height:24px; cursor:default; background:url(pics/arrow.gif) no-repeat;}
.photo ul li a b {display:none;}
.photo ul li a img {display:block; width:22px; height:22px; border:1px solid #666; border-top-color:#ccc;}
.photo ul li a:hover {white-space:normal;position:relative;}
.photo ul li a.vert:hover img {position:absolute; left:-12px; top:-20px; width:48px; height:64px; border-color:#fc0;}
.photo ul li a.hor:hover img {position:absolute; left:-20px; top:-12px; width:64px; height:48px; border-color:#fc0;}
.photo ul li a:active, .photo ul li a:focus {position:static; outline:0;}
.photo ul li a:focus.vert img, .photo ul li a:active.vert img {background-color:#000; position:absolute; left:260px; top:0; width:240px; height:320px; border:1px solid #fc0; padding:5px 45px;}
.photo ul li a:focus.hor img, .photo ul li a:active.hor img {background-color:#000; position:absolute; left:260px; top:0; width:320px; height:240px; border:1px solid #fc0; padding:45px 5px;}
.photo ul li a:focus b, .photo ul li a:active b {display:block; position:absolute; width:204px; height:150px; border:1px solid #666; top:165px; left:0; color:#ddd; font-weight:normal; padding:6px;}
</style>
</head>
<div class="photo">
<ul>
<li><a href="#nogo1" class="hor"><img src="/upload/tech/20091012/20091012141325_68ce199ec2c5517597ce0a4d89620f55.gif" alt="" title="" /><b>Snow capped mountains</b></a></li>
</ul>
</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

淘宝段正淳的css笔记大全又一实用的常用CSS缩写语法收集

CSS样式表 中的 CSS实现的一个图片放大展示的一种思路

评论 (0) All

CSS样式表中的 CSS实现的一个图片放大展示的一种思路