一个简单的javascript图片放大效果代码

一个简单的图片放大效果:
参数说明:
1.berviary:String,需要被放大的图片id
2.expand:object,放大区域,如果不设置此项或者此项的id未设置,则默认为光标跟随模式,会自动创建用于显示放大区域的div.
3.clip:object,裁剪区域的大小,即鼠标移动到需要放大的图片上时,突出显示需要被放的大区域
4.opacity:float,放大时图片被遮罩的区域的透明度
效果1:

调用的js代码:
代码如下:

$E({berviary:"currentPic",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"}); 
 
html代码: 
 代码如下:

<div> 
<div class="img_warp" id="img_warp"> 
<img src="1.jpg" alt="" class="current" id="currentPic" /> 
</div> 
<div class="expand" id="expand" style="border: 1px solid #555; width:400px; height:400px;margin:-200px auto 0 auto; overflow:hidden;"></div> 
</div> 
 
演示效果: 
 
<style type="text/css"> 
.img_warp {width:318px; _height:199px; _overflow:hidden; border:1px solid #ccc;padding:0px;margin-left:0px; margin-top:0px; position:absolute;top:0px; left:0px;} 
.img_warp{position:relative;top:0px; left:0px;/*cursor:crosshair*/} 
.img_warp .current{ width:318px;height:199px} 
</style> 
<script type="text/javascript"> 
var $E = function(opts){ 
function _(objId){return (typeof objId === "string")?document.getElementById(objId):objId;} 
var beImg,expand,clip,cover,warp,expImg; 
var clipWidth,clipHeight; 
var closeTimeId = null; 
var mult = 1; //图片放大倍数,根据裁剪框和放大后图片容器的大小自动调整 
//init 
(function(){ 
beImg = _(opts.berviary); 
warp = beImg.parentNode; 

cover = document.createElement("div"); 
warp.appendChild(cover); 
cover.style.position = "absolute"; 
cover.style.top = "0px"; 
cover.style.left = "0px"; 
cover.style.backgroundColor = "#ccc"; 
var opac = parseFloat(opts.opacity) || 0.3; 
cover.style.opacity = opac; 
cover.style.filter = "Alpha(Opacity=" + opac * 100 + ")"; 
cover.style.width = "100%"; 
cover.style.height = "100%"; 
cover.style.zIndex = 2; 
cover.style.visibility = "hidden"; 

clip = document.createElement("img"); 
warp.appendChild(clip); 

clipWidth = (opts.clip && opts.clip.width) || "60px"; 
clipHeight = (opts.clip && opts.clip.height) || "60px"; 

clip.src = beImg.src; 
clip.className = beImg.className; 
clip.style.position = "absolute"; 
clip.style.top = "0px"; 
clip.style.left = "0px"; 
clip.style.clip = "rect(0px," + clipWidth + "," + clipHeight + ",0px)"; 
clip.style.backgroundColor = "#ccc"; 
clip.style.zIndex = 3; 

//ie里面会变态的自动设置宽度和高度 
clip.removeAttribute("width"); 
clip.removeAttribute("height"); 
})(); 

function layerPos(e){ 
if(e.layerX && e.layerY){ 
return {x:e.layerX,y:e.layerY}; 
} else { 
return {x:e.x,y:e.y}; 
} 
} 

function absolutePos(e){ 
if(e.pageX && e.pageY){ 
return {x:e.pageX,y:e.pageY}; 
} else { 
var x = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft : document.body.scrollLeft); 
var y = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop : document.body.scrollTop); 
return {x:x,y:y}; 
} 
} 

var showExpand = function(x,y,e){ 
if(!expand){ 
initExpand(); 
} 

expImg.style.left = (-1 * x) * mult + "px"; 
expImg.style.top = (-1 * y ) * mult + "px"; 

if((!opts.expand) || (!opts.expand.id)){ 
var aPos = absolutePos(e); 
expand.style.left = aPos.x + parseFloat(clipWidth) / 2 + 20 + "px"; 
expand.style.top = aPos.y + "px"; 
} 

//初始化放大的div 
function initExpand(){ 
if(opts.expand && opts.expand.id) { 
expand = _(opts.expand.id); 
} else { 
expand = document.createElement("div"); 
if(opts.expand && opts.expand.style){ 
for(var p in opts.expand.style){ 
expand.style[p] = opts.expand.style[p]; 
} 
} 
expand.style.border = "1px solid #000"; 

expand.style.position = "absolute"; 
expand.style.left ="0"; 
expand.style.right = "0"; 
expand.style.display = "block"; 
document.body.appendChild(expand); 

if(clip.clientWidth>clip.clientHeight){ 
expand.style.width = clip.clientWidth + "px"; 
expand.style.height = clip.clientWidth * parseFloat(clipHeight) / parseFloat(clipWidth) + "px"; 
} else { 
expand.style.height = clip.clientHeight + "px"; 
expand.style.width = clip.clientHeight * parseFloat(clipWidth) / parseFloat(clipHeight) + "px"; 
} 
expand.style.zIndex = 4; 
} 

expand.style.overflow = "hidden"; 
if((expand.style.position != "relative") && (expand.style.position != "absolute")){ 
//变态的ie6和ie7的img如果为relative,需要设置其父节点也为relative,否则overflow:hidden无效 
expand.style.position = "relative"; 
expand.style.left = "0"; 
expand.style.top = "0"; 
} 
expImg = document.createElement("img"); 
expImg.src = beImg.src; 
expImg.style.position = "relative"; 
expImg.style.left = "0px"; 
expImg.style.top = "0px"; 
expand.appendChild(expImg); 
expImg.removeAttribute("width"); 
expImg.removeAttribute("height"); 

//计算图片放大的倍数 
var ew = expand.clientWidth; 
var eh = expand.clientHeight; 
var cw = parseFloat(clipWidth); 
var ch = parseFloat(clipHeight); 
mult = (ew/cw < eh/ch) ? ew/cw : eh/ch; 

//调整放大图片的大小 
expImg.style.width = beImg.clientWidth * mult + "px"; 
expImg.style.height = beImg.clientHeight * mult + "px"; 
} 

} 

cover.onmousemove = clip.onmousemove = function(e){ 
var e = e || event; 
var pos = layerPos(e); 
var x = pos.x; 
var y = pos.y; 
//判断x和y坐标有没有超出范围 
var w = parseFloat(clipWidth) / 2,h = parseFloat(clipHeight) / 2; 

x = (x < w)?w:x; 
y = (y < h)?h:y; 
x = (x > warp.clientWidth - w) ? (warp.clientWidth - w) : x; 
y = (y > warp.clientHeight - h) ? (warp.clientHeight - h) : y; 
clip.style.clip = "rect(" + (y - h) + "px," + (x + w) + "px," + (y + h) + "px," + (x - w) + "px)"; 
showExpand(x - w,y - h,e); 
} 
warp.onmouseover = cover.onmouseover = clip.onmouseover = function(){ 
//如果清除的定时器存在,则删除. 
if(closeTimeId){ 
clearTimeout(closeTimeId); 
closeTimeId = null; 
} 
if(cover.style.visibility === "hidden"){ 
cover.style.visibility = "visible"; 
} 
if(expand && expand.style.display === "none"){ 
expand.style.display = "block"; 
} 
} 

warp.onmouseout = function(){ 
//延迟一定时间后清除 
closeTimeId = setTimeout(function(){ 
cover.style.visibility = "hidden"; 

if((!opts.expand) || (!opts.expand.id)){ 
expand.style.display = "none"; 
} 
},130); 
} 

return { 
clear:function(){ 
//在这里清除放大镜效果 
warp.removeChild(clip); 
warp.removeChild(cover); 
warp.onmouseout = null; 
if((!opts.expand) || (!opts.expand.id)){ 
expand.style.display = "none"; 
} 
} 
} 
} 
</script> 
<img id="currentPic1" class="current" border="0" alt="" src="https://img.gxlcms.com/https://img.gxlcms.com//Uploads-s//Uploads-s/new/2019-09-17-201917/20100809.jpg" width="1280" height="800" />  
 
 
<script type="text/javascript">$E({berviary:"currentPic1",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"});</script> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 
效果2: 

调用的js代码: 
 代码如下:

$E({berviary:"currentPic",clip:{width:"100px",height:"100px"},opacity:"0.4"}); 
 
html代码: 
 代码如下:

<div> 
<div class="img_warp" id="img_warp"> 
<img src="1.jpg" alt="" class="current" id="currentPic" /> 
</div> 
</div> 
 
演示效果: 
 
<style type="text/css"> 
.img_warp {width:318px; _height:199px; _overflow:hidden; border:1px solid #ccc;padding:0px;margin-left:0px; margin-top:0px; position:absolute;top:0px; left:0px;} 
.img_warp{position:relative;top:0px; left:0px;/*cursor:crosshair*/} 
.img_warp .current{ width:318px;height:199px} 
</style> 
<script type="text/javascript"> 
var $E = function(opts){ 
function _(objId){return (typeof objId === "string")?document.getElementById(objId):objId;} 
var beImg,expand,clip,cover,warp,expImg; 
var clipWidth,clipHeight; 
var closeTimeId = null; 
var mult = 1; //图片放大倍数,根据裁剪框和放大后图片容器的大小自动调整 
//init 
(function(){ 
beImg = _(opts.berviary); 
warp = beImg.parentNode; 

cover = document.createElement("div"); 
warp.appendChild(cover); 
cover.style.position = "absolute"; 
cover.style.top = "0px"; 
cover.style.left = "0px"; 
cover.style.backgroundColor = "#ccc"; 
var opac = parseFloat(opts.opacity) || 0.3; 
cover.style.opacity = opac; 
cover.style.filter = "Alpha(Opacity=" + opac * 100 + ")"; 
cover.style.width = "100%"; 
cover.style.height = "100%"; 
cover.style.zIndex = 2; 
cover.style.visibility = "hidden"; 

clip = document.createElement("img"); 
warp.appendChild(clip); 

clipWidth = (opts.clip && opts.clip.width) || "60px"; 
clipHeight = (opts.clip && opts.clip.height) || "60px"; 

clip.src = beImg.src; 
clip.className = beImg.className; 
clip.style.position = "absolute"; 
clip.style.top = "0px"; 
clip.style.left = "0px"; 
clip.style.clip = "rect(0px," + clipWidth + "," + clipHeight + ",0px)"; 
clip.style.backgroundColor = "#ccc"; 
clip.style.zIndex = 3; 

//ie里面会变态的自动设置宽度和高度 
clip.removeAttribute("width"); 
clip.removeAttribute("height"); 
})(); 

function layerPos(e){ 
if(e.layerX && e.layerY){ 
return {x:e.layerX,y:e.layerY}; 
} else { 
return {x:e.x,y:e.y}; 
} 
} 

function absolutePos(e){ 
if(e.pageX && e.pageY){ 
return {x:e.pageX,y:e.pageY}; 
} else { 
var x = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft : document.body.scrollLeft); 
var y = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop : document.body.scrollTop); 
return {x:x,y:y}; 
} 
} 

var showExpand = function(x,y,e){ 
if(!expand){ 
initExpand(); 
} 

expImg.style.left = (-1 * x) * mult + "px"; 
expImg.style.top = (-1 * y ) * mult + "px"; 

if((!opts.expand) || (!opts.expand.id)){ 
var aPos = absolutePos(e); 
expand.style.left = aPos.x + parseFloat(clipWidth) / 2 + 20 + "px"; 
expand.style.top = aPos.y + "px"; 
} 

//初始化放大的div 
function initExpand(){ 
if(opts.expand && opts.expand.id) { 
expand = _(opts.expand.id); 
} else { 
expand = document.createElement("div"); 
if(opts.expand && opts.expand.style){ 
for(var p in opts.expand.style){ 
expand.style[p] = opts.expand.style[p]; 
} 
} 
expand.style.border = "1px solid #000"; 

expand.style.position = "absolute"; 
expand.style.left ="0"; 
expand.style.right = "0"; 
expand.style.display = "block"; 
document.body.appendChild(expand); 

if(clip.clientWidth>clip.clientHeight){ 
expand.style.width = clip.clientWidth + "px"; 
expand.style.height = clip.clientWidth * parseFloat(clipHeight) / parseFloat(clipWidth) + "px"; 
} else { 
expand.style.height = clip.clientHeight + "px"; 
expand.style.width = clip.clientHeight * parseFloat(clipWidth) / parseFloat(clipHeight) + "px"; 
} 
expand.style.zIndex = 4; 
} 

expand.style.overflow = "hidden"; 
if((expand.style.position != "relative") && (expand.style.position != "absolute")){ 
//变态的ie6和ie7的img如果为relative,需要设置其父节点也为relative,否则overflow:hidden无效 
expand.style.position = "relative"; 
expand.style.left = "0"; 
expand.style.top = "0"; 
} 
expImg = document.createElement("img"); 
expImg.src = beImg.src; 
expImg.style.position = "relative"; 
expImg.style.left = "0px"; 
expImg.style.top = "0px"; 
expand.appendChild(expImg); 
expImg.removeAttribute("width"); 
expImg.removeAttribute("height"); 

//计算图片放大的倍数 
var ew = expand.clientWidth; 
var eh = expand.clientHeight; 
var cw = parseFloat(clipWidth); 
var ch = parseFloat(clipHeight); 
mult = (ew/cw < eh/ch) ? ew/cw : eh/ch; 

//调整放大图片的大小 
expImg.style.width = beImg.clientWidth * mult + "px"; 
expImg.style.height = beImg.clientHeight * mult + "px"; 
} 

} 

cover.onmousemove = clip.onmousemove = function(e){ 
var e = e || event; 
var pos = layerPos(e); 
var x = pos.x; 
var y = pos.y; 
//判断x和y坐标有没有超出范围 
var w = parseFloat(clipWidth) / 2,h = parseFloat(clipHeight) / 2; 

x = (x < w)?w:x; 
y = (y < h)?h:y; 
x = (x > warp.clientWidth - w) ? (warp.clientWidth - w) : x; 
y = (y > warp.clientHeight - h) ? (warp.clientHeight - h) : y; 
clip.style.clip = "rect(" + (y - h) + "px," + (x + w) + "px," + (y + h) + "px," + (x - w) + "px)"; 
showExpand(x - w,y - h,e); 
} 
warp.onmouseover = cover.onmouseover = clip.onmouseover = function(){ 
//如果清除的定时器存在,则删除. 
if(closeTimeId){ 
clearTimeout(closeTimeId); 
closeTimeId = null; 
} 
if(cover.style.visibility === "hidden"){ 
cover.style.visibility = "visible"; 
} 
if(expand && expand.style.display === "none"){ 
expand.style.display = "block"; 
} 
} 

warp.onmouseout = function(){ 
//延迟一定时间后清除 
closeTimeId = setTimeout(function(){ 
cover.style.visibility = "hidden"; 

if((!opts.expand) || (!opts.expand.id)){ 
expand.style.display = "none"; 
} 
},130); 
} 

return { 
clear:function(){ 
//在这里清除放大镜效果 
warp.removeChild(clip); 
warp.removeChild(cover); 
warp.onmouseout = null; 
if((!opts.expand) || (!opts.expand.id)){ 
expand.style.display = "none"; 
} 
} 
} 
} 
</script> 
<img id="currentPic2" class="current" border="0" alt="" src="https://img.gxlcms.com/https://img.gxlcms.com//Uploads-s//Uploads-s/new/2019-09-17-201917/20100809.jpg" width="1280" height="800" />  
 
<script type="text/javascript">$E({berviary:"currentPic2",clip:{width:"100px",height:"100px"},opacity:"0.4"});</script> 

  [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]