一个简单的javascript图片放大效果代码_图象特效-js教程-PHP中文网

一个简单的图片放大效果: 参数说明: 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代码: 复制代码 代码如下: 演示效果: .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} [Ctrl A 全选 注:如需引入外部Js需刷新才能执行 ]

效果2: 调用的js代码: 复制代码 代码如下:

$E({berviary:"currentPic",clip:{width:"100px",height:"100px"},opacity:"0.4"});

html代码: 复制代码 代码如下:

演示效果: .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}; } }

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 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"; } } } } [Ctrl A 全选 注: $E({berviary:"currentPic1",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"}); 如需引入外部Js需刷新才能执行 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;