[其它] html CSS实例效果(8):纯CSS图片放大效果 [复制链接]

newyoungerit　楼主

水楼楼主

银牌会员

帖子: 2192
体力: 1657
威望: 12
居住地: 江苏省徐州市

发表于 2011-3-8 10:58:14 |显示全部楼层

本贴代码实现的是“纯CSS图片放大效果”。

仅供新手参考学习，欢迎大家提出更多的实现方法。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<META NAME="Author" CONTENT="hhshushu" /> 
<META NAME="Keywords" CONTENT="纯CSS图片放大效果" /> 
<META NAME="Description" CONTENT="纯CSS图片放大效果" /> 
  <title>纯CSS图片放大效果</title> 
    <style type="text/css" title=""> 
       body{width:320px;margin:0 auto;padding:20px;background:#000;color:#000;} 
       #main-content{border:5px solid #7bc809;padding:5px;background:#fff ;} 
          ul{ margin:0;padding:0;list-style:none;padding-bottom:300px; /*padding给图片撑开空间*/} 
          li{display:inline;} 
          li a{position:relative;} 
          li a:hover{position:relative;border:none;z-index:1000;}/*此处要有border:none属性，否则IE6下面无法显示出来，是IE6伪类的BUG*/ 
          li a img{width:100px;height:100px;border:none;position:absolute;}/*使用绝对定位让图片固定从而脱离页面流*/ 
          li a:hover img{position:  absolute;left:-10px;top:-50px;width:240px;height:240px;padding:5px;background:#fff;border:2px solid #000;z-index:1000;} /*注意这里的z-index显示设置，否则会有重叠*/ 
         li#pic-01 a img{top:0;left:0;} 
         li#pic-02 a img{top:0;left:100px;} 
         li#pic-03 a img{top:0;left:200px;} 
         li#pic-04 a img{top:100px;left:0;} 
         li#pic-05 a img{top:100px;left:100px;} 
         li#pic-06 a img{top:100px;left:200px;} 
         li#pic-07 a img{top:200px;left:0px;} 
         li#pic-08 a img{top:200px;left:100px;} 
         li#pic-09 a img{top:200px;left:200px;}
                  /*定位图片的排布*/ 
  </style> 
</head> 
<body>
  <div id="main-content" >
    <ul> 
      <li id="pic-01"><a href="http://bbs.blueidea.com"><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="图1" /></a></li> 
      <li id="pic-02"><a href="http://bbs.blueidea.com"><img src="http://bbs.blueidea.com/images/default/logo.gif" alt="图2" /></a></li> 
      <li id="pic-03"><a href="http://home.blueidea.com/apps.php?do=case&ac=lists&uid=560226&picid=68256"><img src="http://home.blueidea.com/attachment/201102/24/560226_12985459674K0h_t.jpg" alt="图3" /></a></li> 
      <li id="pic-04"><a href="#"><img src="#" alt="图4" /></a></li> 
      <li id="pic-05"><a href="#"><img src="#" alt="图5" /></a></li> 
      <li id="pic-06"><a href="#"><img src="#" alt="图6" /></a></li> 
       <li id="pic-07"><a href="#"><img src="#" alt="图7" /></a></li> 
       <li id="pic-08"><a href="#"><img src="#" alt="图8" /></a></li> 
       <li id="pic-09"><a href="#"><img src="#" alt="图8" /></a></li> 
     </ul> 
  </div> 
</body> 
</html>

提示：您可以先修改部分代码再运行

html+CSS实例效果(1):鼠标滑过改变文字

 html+CSS实例效果(2):边框为阴影及DIV内容垂直居中效果

 html+CSS实例效果(3):1个像素缺口加变色按钮

 html+CSS实例效果(4):隔行变色

 html+CSS实例效果(5):em实现倒三角的提示效果

 html+CSS实例效果(6):模拟表格对角线

 html+CSS实例效果(7):纯CSS超过宽度显示省略号

 html CSS实例效果(8):纯CSS图片放大效果

 html+CSS实例效果(9):用图片做成翻页代码