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

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

CSS样式表: DIV和CSS排版中制作细线条的方法小结; 在解决ul居中问题时想到的几点; 网页编辑中CSS样式表技巧总结; 一个老外弄的Clearing floats(清除浮动的方法); 常用的DIV+CSS的基本框架结构但不推荐都放一个div里; 无js5款纯div+css制作的弹出菜单标准; 超强推荐CSS打造经典鼠标触发显示选项; CSS网页布局入门教程5：二列宽度自适应; CSS网页布局入门教程6：左列固定，右列宽度自适应; CSS网页布局入门教程7：二列固定宽度居中; CSS网页布局入门教程9：用CSS设计网站导航——横向导航; CSS网页布局入门教程10：带当前标识的标签式横向导航; CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版; CSS网页布局入门教程12：纵向导航菜单; CSS网页布局入门教程13：下拉及多级弹出式菜单; CSS网页布局入门教程14：纵向下拉及多级弹出式菜单; 解读css发展历史; 让用户自己控制网页字体的大小的css书写方法; CSS注释、命名、继承性、样式排序等CSS技巧的小结; CSS标签切换代码实例教程比较漂亮

No. « ‹ 40 41 42 43 › »

技术文章搜索

关键字

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

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

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