时间戳

首页 > 技术文章 > js放大镜

js放大镜

xiaojiangk 2017-10-19 11:37 原文

<!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: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative; }
#div1 .small_pic { width: 200px; height: 200px; 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="images/small.png" alt="" />
    </div>

    <div class="big_pic">
		<img src="images/big.png" alt="" />
	</div>

</div>

</body>
</html>

　　

推荐阅读