图片放大的效果

转载

xie1982 2021-08-10 10:49:32

文章标签 html xml css 3c 图片放大 文章分类 Html/CSS 前端开发

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title> 图片放大</title>
<style type="text/css">
#info {position:relative;}
#magnifier {display:inline; position:relative; width:240px; height:210px; z-index:100; float:left; margin:0 20px 10px 0; background:url(fangda.gif) no-repeat;}

#cover1 {position:absolute; top:0; left:0; width:24px; height:30px; background:transparent;}
#cover2 {position:absolute; top:0; left:48px; width:240px; height:30px; background:transparent;}

#magnifier img {position:absolute; width:240px; height:180px; top:30px; left:-240px;}

#magnifier ul {padding:0; border:0; margin:0; list-style-type:none;}

#magnifier li {display:block; width:24px; height:24px; position:absolute; left:24px; top:0; background:transparent;}

#magnifier li.one {left:0;}

#magnifier li:hover {width:24px; height:24px; left:0;}
#magnifier li.ten:hover {width:24px; height:24px; left:24px;}

#magnifier li.one:hover img {width:280px; height:210px; left:-240px;}
#magnifier li.two:hover img {width:320px; height:240px; left:-216px;}
#magnifier li.three:hover img {width:360px; height:270px; left:-192px;}
#magnifier li.four:hover img {width:400px; height:300px; left:-168px;}
#magnifier li.five:hover img {width:440px; height:330px; left:-144px;}
#magnifier li.six:hover img {width:480px; height:360px; left:-120px;}
#magnifier li.seven:hover img {width:520px; height:390px; left:-96px;}
#magnifier li.eight:hover img {width:560px; height:420px; left:-72px;}
#magnifier li.nine:hover img {width:600px; height:450px; left:-48px;}
#magnifier li.ten:hover img {width:640px; height:480px; left:-48px;}
#magnifier li.eleven:hover img {width:240px; height:180px; left:-24px;}

#magnifier table {border:0; padding:0; margin:0; border-collapse:collapse;}
</style>
<!--[if lte IE 6]>
<style type="text/css">

#magnifier li {position:static;}
#magnifier img {left:-264px;}
#magnifier li {height:20px;}
#magnifier a {display:block; width:24px; height:24px; left:24px; top:0; position:absolute; background:transparent;}

#magnifier a:hover {border:0;width:24px; height:24px; left:0;}

#magnifier a.aten:hover {border:0;width:24px; height:20px; left:24px;}

#magnifier a.aone:hover img {width:280px; height:210px; left:-240px;}
#magnifier a.atwo:hover img {width:320px; height:240px; left:-216px;}
#magnifier a.athree:hover img {width:360px; height:270px; left:-192px;}
#magnifier a.afour:hover img {width:400px; height:300px; left:-168px;}
#magnifier a.afive:hover img {width:440px; height:330px; left:-144px;}
#magnifier a.asix:hover img {width:480px; height:360px; left:-120px;}
#magnifier a.aseven:hover img {width:520px; height:390px; left:-96px;}
#magnifier a.aeight:hover img {width:560px; height:420px; left:-72px;}
#magnifier a.anine:hover img {width:600px; height:450px; left:-48px;}
#magnifier a.aten:hover img {width:640px; height:480px; left:-48px;}
#magnifier a.aeleven:hover img {width:240px; height:180px; left:-24px;}

</style>
<![endif]-->

</head>

<body>

<div id="info">
<h2>请将鼠标放到下面的图片MAGNIFY X 上 <a href=/download.php>download rar file</a></h2>

</td></tr></table></li>
          </ul>
         </td></tr></table></li>
         </ul>
        </td></tr></table></li>
        </ul>
       </td></tr></table></li>
       </ul>
      </td></tr></table></li>
      </ul>

</td></tr></table></li>
     </ul>
    </td></tr></table></li>
    </ul>
   </td></tr></table></li>
   </ul>
  </td></tr></table></li>
  </ul>
</td></tr></table></li>

</ul>
</td></tr></table></li>
</ul>

</div>

</body>
</html>