CSS实现的一个图片放大展示的一种思路
发布时间：2007-10-25 作者： 来源：转载
这个用纯css实现的图片放大效果,真不错,看了以前有不少用纯css实现的图片放大效果的代码,都不理想,还是在这个好啊看下面的HTML代码：Snowcappedmountains下面是CSS代码：复制代码代码如下:/*commonstyling*/a{color:#000;}a:hover{text-decoration:none;}a:vi
这个用纯css实现的图片放大效果,真不错,看了以前有不少用纯css实现的图片放大效果的代码,都不理想,还是在这个好啊
看下面的HTML代码：
下面是CSS代码：
复制代码 代码如下:
/*commonstyling*/
a{color:#000;}
a:hover{text-decoration:none;}
a:visited{color:#000;}
/*slidesstyling*/
.photo{padding:20px;background:#222;width:600px;height:330px;text-align:left;}
.photoh1{font-size:14px;font-weight:normal;color:#fc0;margin:0005px;padding:0;}
.photoul{list-style:none;padding:0;margin:0;width:216px;background:#333;border:1pxsolid#666;position:relative;height:144px;}
.photoulli{display:inline;width:24px;height:24px;float:left;margin:6px;}
.photoullia{display:block;width:24px;height:24px;cursor:default;background:url(pics/arrow.gif)no-repeat;}
.photoulliab{display:none;}
.photoulliaimg{display:block;width:22px;height:22px;border:1pxsolid#666;border-top-color:#ccc;}
.photoullia:hover{white-space:normal;position:relative;}
.photoullia.vert:hoverimg{position:absolute;left:-12px;top:-20px;width:48px;height:64px;border-color:#fc0;}
.photoullia.hor:hoverimg{position:absolute;left:-20px;top:-12px;width:64px;height:48px;border-color:#fc0;}
.photoullia:active,.photoullia:focus{position:static;outline:0;}
.photoullia:focus.vertimg,.photoullia:active.vertimg{background-color:#000;position:absolute;left:260px;top:0;width:240px;height:320px;border:1pxsolid#fc0;padding:5px45px;}
.photoullia:focus.horimg,.photoullia:active.horimg{background-color:#000;position:absolute;left:260px;top:0;width:320px;height:240px;border:1pxsolid#fc0;padding:45px5px;}
.photoullia:focusb,.photoullia:activeb{display:block;position:absolute;width:204px;height:150px;border:1pxsolid#666;top:165px;left:0;color:#ddd;font-weight:normal;padding:6px;}
看运行效果：
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
