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

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

CSS样式表: 什么叫标准网页设计?; 什么是XHTML?; 巧妙的最大化动态载入IFrame的方法; 为什么要建立web标准与web标准的好处; 创建无表格网站的原因和原则译文; 一个新的CSS菜单代码; 客齐集OEM的CSS解析与开发经验; 页里面 CDATA的作用说明; ie中多id的调用方法; CSS设置网页的字体防浏览器浏览页面字体变形; 用css来控制图片大小显示的实现方法与代码; CSS入门教程篇; CSS选择符说明; IE和FIREFOX下CSS的区别与解决方法; 用CSS让表格返转的代码 IE only; 做网页经常要注意的常识整理收集; div+css实现的滑动门,简洁,新手上路 (小鸽子系列); css滤镜属性语法介绍; 百分比的细节－－容器大小篇; 你不一定知道的Label的For用法

No. « ‹ 37 38 39 40 › »

技术文章搜索

关键字

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

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

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