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

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

CSS样式表: CSS定位中Positoin、absolute、Relative的一些研究; 脚本控制三行三列自适应高度DIV布局的代码; word-wrap在firefox中不起作用的解决方法; 网页设计者需要了解的_网页字体大小数据参考; div+css与xhtml+css分别是什么意思?; xhtml+css网页制作中常见问题解决方法; 表格标签table深入了解; DIV+CSS网页另类上下布局的实例代码; CSS实现每行新闻数量不等效果代码; JAVASCRIPT IE 与 FF 中兼容写法记录; 让超出DIV宽度范围的文字自动显示省略号...; CSS使用学习总结; 解决IE6 3像素Bug的css写法; 用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大; firefox margin-top失效的原因与解决办法; IE hack条件写法; css pointer控制在firefox下显示手型的代码; 纯CSS实现上下左右都居中的代码; 在DW中CSS编码需要注意和掌握的一些技巧; DIV CSS网页布局最小高度（min-height）的妙用

No. « ‹ 50 51 52 53 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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实现的一个图片放大展示的一种思路