超仿淘宝的图片处理

来源：互联网发布：部署ipv6网络编辑：程序博客网时间：2024/04/30 03:15

超级棒，值得研究，特别是网页制作者！

HTML代码：

<!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=utf-8" />
<title>放大镜</title>
<style type="text/css">
#div1 { width: 120px; height: 90px; padding: 5px; border: 1px solid #ccc; position: relative; }
#div1 .small_pic { width: 120px; height: 90px; background: #eee; position: relative; }
#div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1 .mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }
#div1 .big_pic img { position:absolute; top: -30px; left: -80px; }
</style>
<script type="text/javascript">
function getByClass(oParent, sClass)
{
var aEle=oParent.getElementsByTagName('*');
var aTmp=[];
var i=0;

for(i=0;i<aEle.length;i++)
{
  if(aEle[i].className==sClass)
  {
   aTmp.push(aEle[i]);
  }
}

return aTmp;
}

</script>
</head>
<body>
<div id="div1">
<div class="small_pic">
<span class="mark"></span>
        <span class="float_layer"></span>
        <img src="http://www.codefans.net/jscss/demoimg/wall_s6.jpg" /></div>
    <div class="big_pic"><img src="http://www.codefans.net/jscss/demoimg/wall6.jpg" /></div>
</div>
</body>
</html>

示例图：