一个简单的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>

演示效果:

.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}

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 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";
}
}
}
}

$E({berviary:"currentPic1",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"});

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