js放大镜效果，超强注释

最新推荐文章于 2020-12-16 19:23:56 发布

原创最新推荐文章于 2020-12-16 19:23:56 发布 · 631 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript创建一个放大镜效果，通过源代码分析和关键步骤讲解，帮助读者理解其实现原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是源码：

<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 ele=oparent.getElementsByTagName('*');//所有标签元素
	var aTmp=[];//存放结果元素
	var i=0;
	for(i=0;i<ele.length;i++)//遍历所有标签元素
	{
		if(ele[i].className==sclass)//盖子元素的类为sclass的元素
		{
		   aTmp.push(ele[i]);//数组添加元素
		}
	}
	return aTmp;
}
window.onload=function()
{
	var div=document.getElementById("div1");//得到div元素
	var mark=getByClass(div,'mark')[0];//左边图片的遮罩层,覆盖了整个左边区域
	var smllpic=getByClass(div,'small_pic')[0];//左边小区域
	var float=getByClass(div,'float_layer')[0];//左边小阴影
	
	var obig=getByClass(div,'big_pic')[0];//右边大图片区域
	var oImg=obig.getElementsByTagName('img')[0];//右边大图片
	
	smllpic.onmouseover=function()
	{
		obig.style.display='block';//右边大图片显示
		float.style.display='block'; //鼠标移入小阴影显示
	}
	smllpic.onmouseout=function()
	{
		obig.style.display='none';
		float.style.display='none'; 
	}
	smllpic.onmousemove=function(ev)
	{
		var e=ev || event;//排除浏览器兼容问题
		document.title=e.clientX+"-"+e.clientY;
		//鼠标的坐标，最小显示为14,14，将smllpic改为div，就可以看到，屏幕左上角0,0，div1左上角9,9,small_pic左上角14，14
		//offsetLeft表示对象距父元素左边的像素,offsetTop表示当前对象距离父元素上边的像素
		//将e.clientX-smllpic.offsetLeft-div.offsetLeft即可表示鼠标真正所指像素，而-float.offsetWidth/2是为了让鼠标能指向图片居中
		var l=e.clientX-smllpic.offsetLeft-div.offsetLeft-float.offsetWidth/2;
		var t=e.clientY-smllpic.offsetTop-div.offsetTop-float.offsetHeight/2;
 
		//不让边框出去
		if(l<0)//不让左边出去
		{
			l=0;
		}else if(l>mark.offsetWidth-float.offsetWidth)//不让右边出去
		{
			l=mark.offsetWidth-float.offsetWidth;
		}
		if(t<0)//不让上边出去
		{
			t=0;
		}else if(t>mark.offsetHeight-float.offsetHeight)//不让下边出去
		{
			t=mark.offsetHeight-float.offsetHeight;
		}
		
		
		float.style.top=t+'px';//top要小写
		float.style.left=l+'px';
		//document.title=l+"--"+t;
		
		//l的移动范围是从0到mark.offsetWidth-float.offsetWidth，拿l/范围表示此时所在像素占整个图片的比例,左上角为00，右上角为11
		var percntX=l/(mark.offsetWidth-float.offsetWidth);
		var percntY=t/(mark.offsetHeight-float.offsetHeight);
	    document.title=percntX+"--"+percntY;
		
		//右边区域中图片能移动的举例范围是0到obig.offsetWidth-oImg.offsetWidth，那百分比*距离就是对应像素的位置
		oImg.style.left=percntX*(obig.offsetWidth-oImg.offsetWidth)+'px';
		oImg.style.top=percntY*(obig.offsetHeight-oImg.offsetHeight)+'px';
		
		 
	}
}
</script>
</head>

<body>

<div id="div1">
     
     <!--左边小图区域-->
    <div class="small_pic">
		<span class="mark"></span><!--左边图片的遮罩层-->
        <span class="float_layer"></span><!--右边图片的显示区域-->
        <img src="small.png" alt="妙味课堂 - 放大镜图片一" longdesc="http://www.miaov.com" />
    </div>

     <!--右边大图区域-->
    <div class="big_pic">
		<img src="big.png" alt="妙味课堂 - 放大镜图片二" longdesc="http://www.miaov.com" />
	</div>

</div>