您的位置：首页 > 其它

仿淘宝图片放大处理

2011-11-13 22:21 232 查看

<!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;

}

window.onload=function ()

{

var oDiv=document.getElementById('div1');

var oMark=getByClass(oDiv, 'mark')[0];

var oFloat=getByClass(oDiv, 'float_layer')[0];

var oBig=getByClass(oDiv, 'big_pic')[0];

var oSmall=getByClass(oDiv, 'small_pic')[0];

var oImg=oBig.getElementsByTagName('img')[0];

oMark.onmouseover=function ()

{

oFloat.style.display='block';

oBig.style.display='block';

};

oMark.onmouseout=function ()

{

oFloat.style.display='none';

oBig.style.display='none';

};

oMark.onmousemove=function (ev)

{

var oEvent=ev||event;

var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;

var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;

if(l<0)

{

l=0;

}

else if(l>oMark.offsetWidth-oFloat.offsetWidth)

{

l=oMark.offsetWidth-oFloat.offsetWidth;

}

if(t<0)

{

t=0;

}

else if(t>oMark.offsetHeight-oFloat.offsetHeight)

{

t=oMark.offsetHeight-oFloat.offsetHeight;

}

oFloat.style.left=l+'px';

oFloat.style.top=t+'px';

var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);

var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);

oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';

oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';

};

};

</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>

分享到：

上一篇：仿淘宝的放大图片

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航