JavaScript放大镜效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

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>
*{ margin:0; padding:0}
#div1{ width:306px; height:260px; margin:50px; position:relative;border:1px solid #eaeaea; padding:5px;}
.undis{ display:none}
.small{ position:relative; z-index:1}
.floatLeft{ background:#fafafa; border:1px solid #f0f0f0; width:80px; height:80px; display:inline-block; position: absolute; display:none}
.mark{ display:inline-block;width:306px; height:260px;  position:absolute; z-index:5}
.big{ position:absolute; top:0; left:325px; border:1px solid #eaeaea;display:none; z-index:1;;width:316px; height:270px; overflow:hidden;}
.big img{ position:absolute; z-index:5}
</style>
<script>
function getClass(oParent,sClass){
	var oElem = document.getElementById(oParent).getElementsByTagName("*");
	var aClass=[];
	var i= 0;
	for(i;i<oElem.length;i++){
		if(oElem[i].className == sClass)aClass.push(oElem[i]);
		}
	return aClass;
}
window.onload = function(){
	var oSmall = getClass("div1","small")[0];
	var oMark = getClass("div1","mark")[0];
	var oFloatLeft = getClass("div1","floatLeft")[0];
	var oBig = getClass("div1","big")[0];
	var oDiv = document.getElementById("div1");
	var oImg = oBig.getElementsByTagName("img")[0];
	oMark.onmouseover = function(){
		oFloatLeft.style.display = "block"
		oBig.style.display = "block"
		}
	oMark.onmouseout = function(){
		oFloatLeft.style.display = "none"
		oBig.style.display = "none"
		}
	oMark.onmousemove = function(ev){
		var oEvent = ev || event;
		var l = oEvent.clientX - oDiv.offsetLeft - oSmall.offsetLeft - oFloatLeft.offsetWidth/2;
		var t = oEvent.clientY - oDiv.offsetTop - oSmall.offsetTop - oFloatLeft.offsetHeight/2;
		if(l<0){
			l=0;
		}else if(l> (oMark.offsetWidth- oFloatLeft.offsetWidth)){
			l=oMark.offsetWidth- oFloatLeft.offsetWidth ;
			
		}
		
		if(t<0){
			t=0;
		}else if(t> (oMark.offsetHeight- oFloatLeft.offsetHeight)){
			t=oMark.offsetHeight- oFloatLeft.offsetHeight;
			
		}
		
		oFloatLeft.style.left = l + "px";   //oSmall.offsetLeft的值是相对什么而言
		oFloatLeft.style.top = t + "px"; 
		var percentX = l/(oMark.offsetWidth-oFloatLeft.offsetWidth);
		var percentY = t/(oMark.offsetHeight-oFloatLeft.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">
    	<span class="mark"></span>
<span class="floatLeft"></span>
<img src="//ku.shouce.ren/files/images/201601/56a34a70ef0c0.jpg" /></div>
<div class="big"><img src="//ku.shouce.ren/files/images/201601/56a34a71b1138.jpg" /></div>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JavaScript放大镜效果

分类

图片代码

描述

JavaScript放大镜效果，并未使用jQuery，效果是不错，不过有些遗憾，仅火狐支持此效果，在IE和Chrome下均没有效果，同时期待高人修正完善。JS网页放大镜代码，分享给前端开发者。