js图片放大镜效果怎么做？

Question

加个div filter或者换个图片

Answer 1

div 层里嵌入放大到一定程度的图片

Answer 2

放出代码
<script language="JavaScript">
<!--
var smallX = 150; //缩略图宽度
var bigX = 800; //预览窗大小,可以任意设置
var bigY = 568;
var srcX = -1; //原图大小,可以任意设置. 如有一个为-1将使用图片原始大小
var srcY = -1;
var border = 1; //边框
var smallY,viewX,viewY,bl,isIE,vX,vY,imgo;
window.onload=function (){  //初始化数据
 isIE=window.event?1:0; //由于IE和FF对盒模型解释的差异,获取浏览器标记以便修正差异
 if (srcX==-1 || srcY==-1){srcX=bigpic.width;srcY=bigpic.height;} // 如果有一个为-1,则使用原图大小
 else{bigpic.width=srcX;bigpic.height=srcY;}
 smallY=srcY*smallX/srcX; //按比例计算出缩略图的高
 viewX=bigX/srcX*smallX; //计算缩略图的预览窗口大小
 viewY=bigY/srcY*smallY;
 bl=srcX/smallX; //得到缩放比例
 bigbox.style.borderWidth=border; //初始化预览窗
 bigbox.style.width=bigX+border*2*isIE;
 bigbox.style.height=bigY+border*2*isIE;
 view.style.borderWidth=border; //初始化小预览窗
 view.style.width=viewX-!isIE*border*2;
 view.style.height=viewY-!isIE*border*2;
 loading.style.left=bigX/2+bigbox.offsetLeft*!isIE-loading.offsetWidth/2; //初始化loading
 loading.style.top=bigY/2+bigbox.offsetTop*!isIE-loading.offsetHeight/2;
 var imga=document.body.getElementsByTagName("img") //初始化所有缩略图
 for (m=0;m<imga.length;m++)
  if (imga[m].className=="smallpic"){
   imga[m].style.borderWidth=border;
   imga[m].width=smallX;
   imga[m].height=smallY;
   imga[m].onmouseout=function(){if (isIE) view.style.display='none'}
  }
}
function move(e,o){
 if (imgo!=o){ //如果切换图片
   bigpic.style.display = 'none';
   bigpic.src=o.lowsrc; //载入新图片
   imgo=o; //imgo作为标记,避免重复载入相同图片
 }else{
  var e = window.event?window.event:e; //得到IE或FF的event
  if (!isIE){vX=e.pageX-border-o.offsetLeft;vY=e.pageY-border-o.offsetTop}
  else{vX=e.offsetX;vY=e.offsetY} //分别在FF与IE下获得相对坐标
  vX+=-viewX/2; vY+=-viewY/2; //得到缩略图的预览窗位置
  if (vX < 0) vX = 0; //边界判断,不能超出缩略图的范围
  if (vY < 0) vY = 0;
  if (vX > smallX - viewX) vX = smallX - viewX;
  if (vY > smallY - viewY) vY = smallY - viewY;
  bigpic.style.marginLeft = - vX * bl; //刷新预览窗口
  bigpic.style.marginTop = - vY * bl;
  view.style.display = 'block'; //刷新缩略图中预览窗口
  view.style.left = vX + o.offsetLeft + border;
  view.style.top = vY + o.offsetTop + border;
 }
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
body{background:black}
.smallpic{display:block;border:green dotted;float:left}
#bigbox{border:green solid;width:800px;height:568px;overflow:hidden;font-size:0px;float:left;}
#view{border:silver solid;width:0;height:0;font-size:0px;display:none;position:absolute;}
#loading{position:absolute;z-index:-1;font-size:20px;font-weight:bold;color:white;}
#loading img{vertical-align:middle}
//-->
</style>
<div id="bigbox"><img id="bigpic" src="http://www.whoj.net/images//b1.jpg" border="0" onload="this.style.display = 'block'"><div id="loading"><img src="http://www.whoj.net/images/loading.gif" border="0"> Loading...</div></div><!--预览窗//-->
<div id="view" onmousemove="if (!isIE) move(event,imgo)" onmouseout="if (!isIE) view.style.display='none'"></div><!--小预览窗//-->
<img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b1.jpg" src="http://www.whoj.net/images/s1.jpg"><!--缩略图,lowsrc大图,src小图//-->
<img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b2.jpg" src="http://www.whoj.net/images/s2.jpg">
<img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b3.jpg" src="http://www.whoj.net/images/s3.jpg">
<img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b4.jpg" src="http://www.whoj.net/images/s4.jpg">
<img class="smallpic" onmousemove="move(event,this)" lowsrc="http://www.whoj.net/images/b5.jpg" src="http://www.whoj.net/images/s5.jpg">

Answer 3

思路都是很统一的,把原图片换掉,再生成一个跟随mouse 的层放上去就OK了.

Answer 4

放大我已经做出来了。然后我增加了一个div，这个div是用来装载清晰的小框图片的。但还是不行。

Answer 5

你思路错了.
首先,原网址上根本不用放大程序.直接用onmouseover事件控制显示的图片就行了.
看上去很清晰的小框只是滤镜效果,这方面建议你研究一下CSS.

Answer 6

我用了alpha滤镜了，当鼠标onmouseover图片时，把alpha值变成40，当onmouseout图片时，把alpha值变成100。但这个只能对整张图进行变化，小框的范围也是不能清晰的。其实放大效果的思路，我基本都是按照rjzou2006 这样做的。他的效果就是差小图变模糊，小框里变清晰这一步。我想了好几天了，还没想出来，烦啊。

Answer 7

  关注ing....................................................................................

Answer 8

其中一种实现法：
左边是一个小的图片，右边是一个大的图片，
小图片onmousemove的时候整体alpha透明，小框部分用BasicImage滤镜来遮罩并跟随鼠标移动，
右边大图片的移动效果的实现，可以根据左边小框部分在大框中的位置百分比来定位。

Answer 9

我找到这个源代码,经测试可以使用.但这个估计加密了,源程序看不出来,不知哪位有办法解密的?/* ©2007 MagicToolbox.com. To use this code on your own site, visit http://magictoolbox.com */
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('8 7=\'t\';8 W=2y.2z.2A();6(W.Z("H")!=-1){7=\'H\'}n 6(W.Z("t")!=-1){7=\'t\'}n 6(W.Z("2w")!=-1){7=\'M\'}8 15=2s 2t();d 13(1I){j 9.2u(1I)};d 1s(){j B};d R(V,s,S){6(7==\'M\'||7==\'H\'){V.2v(s,S,B)}n 6(7==\'t\'){V.2C("1t"+s,S)}};d 1L(V,s,S){6(7==\'M\'||7==\'H\'){V.2J(s,S,B)}n 6(7==\'t\'){V.2L("1t"+s,S)}};d E(1v,1K){8 2D=1O;j d(){1v[1K].2G(1v,1O,"")}};d m(1P,1Q,1R,1S,h){4.1o=B;4.k=13(1P);4.z=13(1Q);4.c=13(1R);4.g=13(1S);4.p=0;4.h=h;6(!4.h["11"]){4.h["11"]=""}4.14=0;4.Y=0;4.D=0;4.C=0;4.K=20;4.2M=20;4.v=0;4.A=0;4.2F=\'\';4.1p=B;15.2E(4);4.1q=E(4,"1h")};m.u.2I=d(){1L(G.9,"1d",4.1q)};m.u.1h=d(e){8 y=0;8 x=0;6(7==\'t\'){y=e.1b;x=e.1a;6(9.1c&&(9.1c.1k||9.1c.T)){y=e.1b+9.1c.T;x=e.1a+9.1c.1k}n 6(9.12&&(9.12.1k||9.12.T)){y=e.1b+9.12.T;x=e.1a+9.12.1k}}n{y=e.1b;x=e.1a;6(W.Z("1D")==-1){y+=G.1V;x+=G.1Y}}O=N=0;8 l=4.z;1r(l.1g!="1U"&&l.1g!="21"){O+=l.22;N+=l.1u;l=l.1Z}6(x>w(N+4.D)){4.18();j B}6(x<w(N)){4.18();j B}6(y>w(O+4.C)){4.18();j B}6(y<w(O)){4.18();j B}j o};m.u.1B=d(e){6(7==\'M\'){e.X=o;e.1z();e.1A()}n 6(7==\'t\'||7==\'H\'){G.s.X=o}4.k.5.1E=\'1N\'};m.u.1y=d(e){6(7==\'M\'){e.X=o;e.1z();e.1A()}n 6(7==\'t\'||7==\'H\'){G.s.X=o}4.k.5.1E=\'2B\'};m.u.1d=d(e){6(7==\'M\'){e.X=o;e.1z();e.1A()}n 6(7==\'t\'||7==\'H\'){G.s.X=o}2x(i=0;i<15.2l;i++){6(15[i]!=4){15[i].1h(e)}}6(4.h&&4.h["2r"]==o){6(4.k.5.1E!=\'1N\'){j}}6(4.1o){j}6(!4.1h(e)){j}4.1o=o;8 1T=4.z;8 N=0;8 O=0;6(7==\'M\'||7==\'H\'){8 l=1T;1r(l.1g!="1U"&&l.1g!="21"){O+=l.22;N+=l.1u;l=l.1Z}}6(7==\'t\'){4.v=s.x-4.z.1u;8 T=0;4.A=s.y+T}n{4.v=e.1a-N;4.A=e.1b-O;6(W.Z("1D")==-1){4.v+=G.1Y;4.A+=G.1V}}6((4.v+4.K/2)>=4.D){4.v=4.D-4.K/2}6((4.A+4.I/2)>=4.C){4.A=4.C-4.I/2}6((4.v-4.K/2)<=0){4.v=4.K/2}6((4.A-4.I/2)<=0){4.A=4.I/2}1w(E(4,"1C"),10)};m.u.1C=d(){4.p.5.Q=(4.v-4.K/2)+\'F\';4.p.5.U=(4.A-4.I/2)+\'F\';4.p.5.17="1f";1W=w(4.p.5.Q)*(4.14/4.D);1X=w(4.p.5.U)*(4.Y/4.C);4.g.5.Q=(-1W)+\'F\';4.g.5.U=(-1X)+\'F\';4.c.5.1x=\'23\';4.c.5.17=\'1f\';4.g.5.1x=\'23\';4.g.5.17=\'1f\';4.1o=B};m.u.18=d(){6(4.h&&4.h["2T"]==o)j;4.p.5.17="25";4.c.5.1x=\'1J\';4.c.5.17=\'1f\'};m.u.2o=d(){4.p=9.J("P");4.p.1F=\'2O\';4.K=(w(4.c.5.q)-3)/(4.14/4.D);6(4.h&&4.h["11"]!=""){4.I=(w(4.c.5.r)-3-19)/(4.Y/4.C)}n{4.I=(w(4.c.5.r)-3)/(4.Y/4.C)}4.p.5.q=4.K+\'F\';4.p.5.r=4.I+\'F\';4.k.L(4.p);4.k.2W="1t";4.k.5.33="1J";4.k.30=1s;4.k.2X=1s};m.u.2q=d(){8 27=4.g.1m;1r(4.c.1M){4.c.3e(4.c.1M)}6(7==\'t\'){8 f=9.J("2Z");f.5.Q=\'1j\';f.5.U=\'1j\';f.5.1n=\'1H\';f.5.2Y=\'31:32.2V.2Q(5=0,2P=0)\';f.5.q=4.c.5.q;f.5.r=4.c.5.r;f.2R=0;4.c.L(f)}6(4.h&&4.h["11"]!=""){8 f=9.J("P");f.1F=\'24\';f.1l=4.h["11"];4.c.L(f)}8 f=9.J("P");f.1F=\'24\';f.1l=" &#2S;2U <b>m</b> 34 <a 28=\\"35://2n.2b\\">2n.2b</a>";4.c.L(f);8 2c=9;8 29=2c.3f;8 3b=29.28;8 16=9.J("P");16.5.2e="25";4.c.L(16);4.g=9.J("39");4.g.1m=27;4.g.5.1n=\'3a\';16.L(4.g);6((4.g.q+4.g.r)>10*(2*16.5.2e.2l-2)*10){8 1G=\'<b>38 37 36 3d 2N 3c m</b>\';8 f=9.J("P");f.5.2h=\'#2g\';f.5.2f=\'2i\';f.5.2j=\'2k\';f.5.1n=\'1H\';f.5.q=\'1e%\';f.5.2d=\'26\';f.1l=1G;4.c.L(f);f.5.Q=\'1j\';f.5.U=\'2H\';8 f=9.J("P");f.5.2h=\'#2g\';f.5.2f=\'2i\';f.5.2j=\'2k\';f.5.1n=\'1H\';f.5.q=\'1e%\';f.5.2d=\'26\';f.1l=1G;4.c.L(f);f.5.Q=\'1j\';f.5.U=w(4.c.5.r)-20+\'F\'}};m.u.1i=d(){6(W.Z("1D")!=-1){6(!4.1p){R(4.g,"2K",E(4,"1i"));4.1p=o;j}}n{6(!4.g.2a||!4.z.2a){1w(E(4,"1i"),1e);j}}4.14=4.g.q;4.Y=4.g.r;4.D=4.z.q;4.C=4.z.r;6(4.14==0||4.Y==0||4.D==0||4.C==0){4.g.1m+=\'?\'+2m.2p();4.z.1m+=\'?\'+2m.2p();1w(E(4,"1i"),1e);j}4.k.5.q=4.z.q+\'F\';4.k.5.r=4.z.r+\'F\';4.2q();4.2o();R(G.9,"1d",4.1q);R(4.k,"1d",E(4,"1d"));6(4.h&&4.h["2r"]==o){R(4.k,"1B",E(4,"1B"));R(4.k,"1y",E(4,"1y"));4.v=4.D/2;4.A=4.C/2;4.1C()}};',62,202,'||||this|style|if|MagicZoom_ua|var|document|||bigImageCont|function|||bigImage|settings||return|smallImageCont|tag|MagicZoom|else|true|pup|width|height|event|msie|prototype|positionX|parseInt|||smallImage|positionY|false|smallImageSizeY|smallImageSizeX|MagicZoom_createMethodReference|px|window|opera|popupSizeY|createElement|popupSizeX|appendChild|gecko|smallX|smallY|DIV|left|MagicZoom_addEventListener|listener|scrollTop|top|obj||cancelBubble|bigImageSizeY|indexOf||header|documentElement|_el|bigImageSizeX|MagicZoom_zooms|ar1|visibility|hiderect||clientX|clientY|body|mousemove|100|visible|tagName|checkcoords|initZoom|0px|scrollLeft|innerHTML|src|position|recalculating|safariOnLoadStarted|checkcoords_ref|while|MagicView_ia|on|offsetLeft|object|setTimeout|display|mouseup|preventDefault|stopPropagation|mousedown|showrect|safari|cursor|className|str|absolute|id|none|methodName|MagicZoom_removeEventListener|firstChild|move|arguments|smallImageContId|smallImageId|bigImageContId|bigImageId|smallImg|BODY|pageYOffset|perX|perY|pageXOffset|offsetParent||HTML|offsetTop|block|MagicZoomHeader|hidden|center|bigimgsrc|href|dcl|complete|com|dc|textAlign|overflow|fontSize|cccccc|color|10px|fontFamily|Tahoma|length|Math|MagicToolbox|initPopup|random|initBigContainer|drag_mode|new|Array|getElementById|addEventListener|mozilla|for|navigator|userAgent|toLowerCase|default|attachEvent|args|push|baseuri|apply|25px|stopZoom|removeEventListener|load|detachEvent|popupSizey|version|MagicZoomPup|opacity|Alpha|frameBorder|169|bigImage_always_visible|2007|Microsoft|unselectable|oncontextmenu|filter|IFRAME|onselectstart|progid|DXImageTransform|MozUserSelect|by|http|to|upgrade|Please|IMG|relative|dclh|of|full|removeChild|location'.split('|'),0,{}))