图片放大倍数

style type=textcss
.img_warp {width318px; _height199px; _overflowhidden; border1px solid #ccc;padding0px;margin-left0px; margin-top0px; positionabsolute;top0px; left0px;}
.img_warp{positionrelative;top0px; left0px;cursorcrosshair}
.img_warp .current{ width318px;height199px}
style
script type=textjavascript
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(https://www.360docs.net/doc/9c11228619.html,yerX && https://www.360docs.net/doc/9c11228619.html,yerY){
return {https://www.360docs.net/doc/9c11228619.html,yerX,https://www.360docs.net/doc/9c11228619.html,yerY};
} else {
return {xe.x,ye.y};
}
}

function absolutePos(e){
if(e.pageX && e.pageY){
return {xe.pageX,ye.pageY};
} else {
var x = e.clientX + (document.documentElement.scrollLeftdocument.documentElement.scrollLeft document.body.scrollLeft);
var y = e.clientY + (document.documentElement.scrollTopdocument.documentElement.scrollTop document.body.scrollTop);
return {xx,yy};
}
}

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;
d

ocument.body.appendChild(expand);

if(clip.clientWidthclip.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,否则overflowhidden无效
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 = (ewcw ehch) ewcw ehch;

调整放大图片的大小
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)wx;
y = (y h)hy;
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 {
clearfunction(){
在这里清除放大镜效果
warp.removeChild(clip);
warp.removeChild(cover);
warp.onmouseout = null;
if((!opts.expand) (!opts.expand.id)){
expand.style.display = none;
}
}
}
}
script
div id=img_warp class=img_warpimg id=currentPic1 class=current border=0 alt= src=get_pic20100320100810115815250.jpg width=1280 height=800 div
div style=border-bottom #555 1px solid; border-left #555 1px solid; margin -200px 0px 0px 400px; width 400px; height 400px; overflow hidden; border-top #555 1px solid; border-rig

ht #555 1px solid id=expand class=expanddiv
div
script type=textjavascript$E({berviarycurrentPic1,expand{idexpand,style{}},clip{width50px,height50px},opacity0.2});script