JS放大或者缩写图片 放大镜
http://bbs.csdn.net/topics/390265811
<!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
>
<
title
>JS放大或者缩写</
title
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
/>
<
style
type
=
"text/css"
>
.zoomPan{width:570px;left:100px;position:relative; }
.sh{zoom:1;background:#eee;filter:progid:DXImageTransform.Microsoft.dropShadow(color='#54000000', OffX=2,OffY=2);-webkit-box-shadow:4px 4px 4px #666;-moz-box-shadow:4px 4px 4px #666;}
#zoom{position:absolute;width:254px;height:254px;border:3px solid #fff;left:-9999px;top:0;overflow:hidden;background:#fff;}
#zoom img{position:relative;}
h1{color:#FF0080;border-bottom:5px solid #ddd;padding:10px;}
h4{text-align:right;padding:20px;border-top:1px solid #ddd;color:#ccc;}
</
style
>
</
head
>
<
body
>
<
h1
>zoom</
h1
>
<
div
class
=
"zoomPan"
id
=
"zoomPan"
>
<
img
src
=
"/jscss/demoimg/201008/s.jpg"
alt
=
""
/>
<
div
id
=
"zoom"
class
=
"sh"
><
img
src
=
"/jscss/demoimg/201008/b.jpg"
alt
=
""
/></
div
>
</
div
>
<
h4
>code.js.cn</
h4
>
</
body
>
<
script
type
=
"text/javascript"
>
//
<![CDATA[
function zoomBox() {this.index.apply(this, arguments)}
zoomBox.prototype = {
index: function(win,zoom) {
var win=document.getElementById(win);
var box=document.getElementById(zoom);
var img=box.getElementsByTagName('IMG')[0];
var zoom=img.width/win.getElementsByTagName('IMG')[0].width;
var z=Math.round(box.offsetWidth/2);
win.onmousemove=function (e){
e = e || window.event;
var x=e.clientX,y=e.clientY, ori=win.getBoundingClientRect();
if (x>ori.right+20||y>ori.bottom+20||x<ori.left-20||y<ori.top-20)box.style.display='none';
x-=ori.left;
y-=ori.top;
box.style.left=x-z+'px';
box.style.top=y-z+'px';
img.style.left=-x*zoom+z+'px';
img.style.top=-y*zoom+z+'px';
}
win.onmouseover=function (){box.style.display=''}
}
};
window.onload=function (){
x=new zoomBox('zoomPan','zoom')
}
//]]>
</
script
>
</
html
>
http://bbs.csdn.net/topics/390265811 2楼