利用javascript实现图片局部放大

最新推荐文章于 2022-06-28 17:30:08 发布
最新推荐文章于 2022-06-28 17:30:08 发布
阅读量804 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript div function border microsoft filter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linshizhan/article/details/7716485
版权

    

  效果：

  

 局部放大：

 

 1.js

   

// TJPzoom 3 * Janos P Toth
// 2007.07.12
// 2011.03.24 firefox 4 apparently has a style.filter attribute (which i didn't expect in 2007)
// Docs @ http://valid.tjp.hu/tjpzoom/ 
// News @ http://blog.tjp.hu/

function TJPzoomswitch(obj) {
 TJPon[obj]=((TJPon[obj])?(0):(1));
 return TJPon[obj];
}

function TJPzoomif(obj,highres) {
 if(TJPon[obj]) {TJPzoom(obj,highres);}
}

function TJPzoom(obj,highres) {
 TJPzoomratio=TJPzoomheight/TJPzoomwidth;
 if(TJPzoomoffsetx > 1) {
  TJPzoomoffset='dumb';
  TJPzoomoffsetx=TJPzoomoffsetx/TJPzoomwidth;
  TJPzoomoffsety=TJPzoomoffsety/TJPzoomheight;
 }
 if(!obj.style.width) {
  if(obj.width > 0) {
   //educated guess
   obj.style.width=obj.width+'px';
   obj.style.height=obj.height+'px';
  }
 }
 if(typeof(highres) != typeof('')) {highres=obj.src}
 var TJPstage=document.createElement("div");
 TJPstage.style.width=obj.style.width;
 TJPstage.style.height=obj.style.height;
 TJPstage.style.overflow='hidden';
 TJPstage.style.position='absolute';
 if(typeof(TJPstage.style.filter) != typeof(nosuchthing)) {
  //hi IE
  if((navigator.appVersion + '').indexOf('Mac') == -1 && navigator.appName == 'Microsoft Internet Explorer') { //Mac IE gets out
   TJPstage.style.filter='alpha(opacity=0)';
   TJPstage.style.backgroundColor='#ffffff';
  }
 } else {
  //hi decent gentlemen
  TJPstage.style.backgroundImage='transparent';
 }
 TJPstage.setAttribute('onmousemove','TJPhandlemouse(event,this);');
 TJPstage.setAttribute('onmousedown','TJPhandlemouse(event,this);');
 TJPstage.setAttribute('onmouseup','TJPhandlemouse(event,this);');
 TJPstage.setAttribute('onmouseout','TJPhandlemouse(event,this);');
 if(navigator.userAgent.indexOf('MSIE')>-1) {
  TJPstage.onmousemove = function() {TJPhandlemouse(event,this);}
  TJPstage.onmousedown = function() {TJPhandlemouse(event,this);}
  TJPstage.onmouseup = function() {TJPhandlemouse(event,this);}
  TJPstage.onmouseout = function() {TJPhandlemouse(event,this);}
 }
 obj.parentNode.insertBefore(TJPstage,obj);
 
 TJPwin=document.createElement("div");
 TJPwin.style.width='0px';
 TJPwin.style.height='0px';
 TJPwin.style.overflow='hidden';
 TJPwin.style.position='absolute';
 TJPwin.style.display='none';
 tw1='<div style="position:absolute;overflow:hidden;margin:';
 TJPwin.innerHTML= 
 tw1+TJPshadowthick+'px 0 0 '+TJPshadowthick+'px; background-color:'+TJPbordercolor+'; width:'+(TJPzoomwidth-TJPshadowthick*2)+'px;height:'+(TJPzoomheight-TJPshadowthick*2)+'px"></div>' +
 tw1+(TJPshadowthick+TJPborderthick)+'px 0 0 '+(TJPshadowthick+TJPborderthick)+'px; width:'+(TJPzoomwidth-TJPshadowthick*2-TJPborderthick*2)+'px;height:'+(TJPzoomheight-TJPshadowthick*2-TJPborderthick*2)+'px;"><img src="'+obj.src+'" style="position:absolute;margin:0;padding:0;border:0; width:'+(TJPzoomamount*parseInt(obj.style.width))+'px;height:'+(TJPzoomamount*parseInt(obj.style.height))+'px;" />'+((obj.src!=highres)?('<img src="'+highres+'" style="position:absolute;margin:0;padding:0;border:0; width:'+(TJPzoomamount*parseInt(obj.style.width))+'px;height:'+(TJPzoomamount*parseInt(obj.style.height))+'px;" οnlοad="if(this.parentNode) {this.parentNode.parentNode.getElementsByTagName(\'div\')[2].style.display=\'none\';}" />'):(''))+'</div>';
 if(highres != obj.src) {
  TJPwin.innerHTML+='<div style="position:absolute; margin:'+(TJPshadowthick+TJPborderthick)+'px 0 0 '+(TJPshadowthick+TJPborderthick)+'px;">'+TJPloading+'</div>';
 }
 if(TJPshadowthick>0) {
  st1='<span style="position:absolute; display:inline-block; margin: ';
  st2='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\'scale\',src='
  st3='filter:alpha(opacity=0);margin:0;padding:0;border:0;"/></span>';
  TJPwin.innerHTML+=
  st1+'0 0 0 0    ; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'nw.png\')"><img src="'+TJPshadow+'nw.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  st1+'0 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'ne.png\')"><img src="'+TJPshadow+'ne.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  st1+''+(TJPzoomheight-TJPshadowthick*2)+'px 0 0 0px; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'sw.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'sw.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  st1+''+(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'se.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'se.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  
  st1+'0 0 0 '+(TJPshadowthick*2)+'px; width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'n.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'n.png" style="width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  st1+''+(TJPshadowthick*2)+'px 0 0 0; width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st2+'\''+TJPshadow+'w.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'w.png" style="width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st3 +
  st1+''+(TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px; width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st2+'\''+TJPshadow+'e.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'e.png" style="width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st3 +
  st1+''+(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPshadowthick*2)+'px; width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'s.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'s.png" style="width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st3;
 }
 ;
 //marker - zoomer
 obj.parentNode.insertBefore(TJPwin,TJPstage);

 TJPresize(obj);
}

function TJPresize(obj) {
 sbr=0; sbl=0;
 if(TJPzoomwidth-2*TJPborderthick-3*TJPshadowthick < 22) {sbr=1}
 if(TJPzoomheight-2*TJPborderthick-3*TJPshadowthick < 22) {sbr=1}
 if(TJPzoomwidth > parseFloat(obj.style.width)) {sbl=1;}
 if(TJPzoomheight > parseFloat(obj.style.height)) {sbl=1}
 
 if(sbr==1 && sbl == 1) {
  TJPzoomwidth=parseFloat(obj.style.width)/2;
  TJPzoomheight=parseFloat(obj.style.height)/2;
  TJPzoomratio=TJPzoomheight/TJPzoomwidth;
 }

 if(sbr==1) {
  if(TJPzoomwidth<TJPzoomheight) {
   TJPzoomheight=TJPzoomheight/TJPzoomwidth*(22+2*TJPborderthick+3*TJPshadowthick); TJPzoomwidth=22+2*TJPborderthick+3*TJPshadowthick;
  } else {
   TJPzoomwidth=TJPzoomwidth/TJPzoomheight*(22+2*TJPborderthick+3*TJPshadowthick); TJPzoomheight=22+2*TJPborderthick+3*TJPshadowthick;
  }
 }
 

 if(sbl==1) {
  if(parseFloat(obj.style.width)/parseFloat(obj.style.height) > TJPzoomwidth/TJPzoomheight) {
   TJPzoomheight=parseFloat(obj.style.height);
   TJPzoomwidth=TJPzoomheight/TJPzoomratio;
  } else {
   TJPzoomwidth=parseFloat(obj.style.width);
   TJPzoomheight=TJPzoomratio*TJPzoomwidth;
  }
 }

 TJPzoomwidth=Math.floor(TJPzoomwidth/2)*2;
 TJPzoomheight=Math.floor(TJPzoomheight/2)*2;

 ww=obj.parentNode.getElementsByTagName('div')[0];
 ww.style.width=TJPzoomwidth+'px';
 ww.style.height=TJPzoomheight+'px';
 w=ww.getElementsByTagName('div')[0];
 w.style.width=TJPzoomwidth-TJPshadowthick*2+'px';
 w.style.height=TJPzoomheight-TJPshadowthick*2+'px';
 w=ww.getElementsByTagName('div')[1];
 w.style.width=TJPzoomwidth-TJPshadowthick*2-TJPborderthick*2+'px';
 w.style.height=TJPzoomheight-TJPshadowthick*2-TJPborderthick*2+'px';
 if(TJPshadowthick > 0) {
  w=ww.getElementsByTagName('span')[1]; w.style.margin='0 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px';
  w=ww.getElementsByTagName('span')[2]; w.style.margin=(TJPzoomheight-TJPshadowthick*2)+'px 0 0 0px';
  w=ww.getElementsByTagName('span')[3]; w.style.margin=(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px';

  w=ww.getElementsByTagName('span')[6]; w.style.margin=(TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px';
  w=ww.getElementsByTagName('span')[7]; w.style.margin=(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPshadowthick*2)+'px';

  www=(TJPzoomwidth-TJPshadowthick*4)+'px';
  w=ww.getElementsByTagName('span')[4]; w.style.width=www;
  w=w.getElementsByTagName('img')[0]; w.style.width=www;
  w=ww.getElementsByTagName('span')[7]; w.style.width=www;
  w=w.getElementsByTagName('img')[0]; w.style.width=www;
  
  www=(TJPzoomheight-TJPshadowthick*4)+'px';
  w=ww.getElementsByTagName('span')[5]; w.style.height=www;
  w=w.getElementsByTagName('img')[0]; w.style.height=www;
  w=ww.getElementsByTagName('span')[6]; w.style.height=www;
  w=w.getElementsByTagName('img')[0]; w.style.height=www;
 }
}

function TJPfindposy(obj) {
 var curtop = 0;
 if(!obj) {return 0;}
 if (obj.offsetParent) {
  while (obj.offsetParent) {
   curtop += obj.offsetTop
   obj = obj.offsetParent;
  }
 } else if (obj.y) {
  curtop += obj.y;
 }
 return curtop;
}

function TJPfindposx(obj) {
 var curleft = 0;
 if(!obj) {return 0;}
 if (obj && obj.offsetParent) {
  while (obj.offsetParent) {
   curleft += obj.offsetLeft
   obj = obj.offsetParent;
  }
 } else if (obj.x) {
  curleft += obj.x;
 }
 return curleft;
}


function TJPhandlemouse(evt,obj) {
 var evt = evt?evt:window.event?window.event:null; if(!evt) { return false; }
 if(evt.pageX) {
  nowx=evt.pageX-TJPfindposx(obj)-TJPadjustx;
  nowy=evt.pageY-TJPfindposy(obj)-TJPadjusty;
 } else {
  if(document.documentElement && document.documentElement.scrollTop) {
   nowx=evt.clientX+document.documentElement.scrollLeft-TJPfindposx(obj)-TJPadjustx;
   nowy=evt.clientY+document.documentElement.scrollTop-TJPfindposy(obj)-TJPadjusty;
  } else {
   nowx=evt.x+document.body.scrollLeft-TJPfindposx(obj)-TJPadjustx;
   nowy=evt.y+document.body.scrollTop-TJPfindposy(obj)-TJPadjusty;
  }
 }
 if(evt.type == 'mousemove') {
  TJPsetwin(obj,nowx,nowy);
 } else if(evt.type == 'mousedown') {
  TJPmouse=1; //left: 1, middle: 2, right: 3
  TJPmousey=nowy;
  TJPmousex=nowx;
 } else if(evt.type =='mouseup') {
  TJPmouse=0;
 } else if(evt.type =='mouseout') {
  TJPmouse=0;
  if(navigator.appVersion.indexOf('Mac') == -1 || navigator.appVersion.indexOf('MSIE') == -1) { //hi Mac IE
   x=obj.parentNode;
   x.removeChild(x.getElementsByTagName('div')[0]);
   x.removeChild(x.getElementsByTagName('div')[0]);
  }
 }
}


// TJPzoom 3 * János Pál Tóth
// Docs @ http://valid.tjp.hu/tjpzoom/ 
// News @ http://tjpzoom.blogspot.com/


function TJPsetwin(obj,nowx,nowy) {
 obj.parentNode.getElementsByTagName('div')[0].style.display='block';
 if(TJPzoomoffset=='smart') {
  TJPzoomoffsetx=.1+.8*nowx/parseFloat(obj.style.width);
  TJPzoomoffsety=.1+.8*nowy/parseFloat(obj.style.height);
 }

 stage=obj.parentNode.getElementsByTagName('div')[0];
 if(TJPmouse == 1) {
  if(Math.abs(nowy-TJPmousey) >= 1) {
   TJPzoomamount*=((nowy>TJPmousey)?(0.909):(1.1));
   TJPmousey=nowy;
   if(TJPzoomamount < TJPzoomamountmin) {TJPzoomamount=TJPzoomamountmin;}
   if(TJPzoomamount > TJPzoomamountmax) {TJPzoomamount=TJPzoomamountmax;}
   stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.width=  parseInt(obj.style.width)*TJPzoomamount+'px';
   stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.height=  parseInt(obj.style.height)*TJPzoomamount+'px';
   if(stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {
    stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.width= stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.width;
    stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.height= stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.height;
   }
  }
  if(Math.abs(nowx-TJPmousex) >= 12 && TJPzoomwindowlock==0) {
   TJPzoomwidth*=((nowx>TJPmousex)?(1.1):(0.909));
   TJPzoomheight=TJPzoomwidth*TJPzoomratio;
   TJPresize(obj);
   TJPmousex=nowx;
  }
 }
 stage.style.marginLeft=nowx-(TJPzoomwidth -2*TJPborderthick-2*TJPshadowthick)*TJPzoomoffsetx-TJPborderthick-TJPshadowthick+'px';
 stage.style.marginTop= nowy-(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick)*TJPzoomoffsety-TJPborderthick-TJPshadowthick+'px';
 clip1=0; clip2=TJPzoomwidth; clip3=TJPzoomheight; clip4=0;
 nwidth=TJPzoomwidth; nheight=TJPzoomheight;
 tmp=(1-2*TJPzoomoffsetx)*(TJPborderthick+TJPshadowthick);
 
 if(nowx-TJPzoomwidth*TJPzoomoffsetx < tmp) {
  clip4=TJPzoomwidth*TJPzoomoffsetx-nowx + tmp;
 } else if(parseFloat(nowx-TJPzoomwidth*TJPzoomoffsetx+TJPzoomwidth) > parseFloat(obj.style.width)+tmp) {
  clip2= TJPzoomwidth*TJPzoomoffsetx - nowx + parseFloat(obj.style.width)+tmp;
  nwidth=TJPzoomwidth*TJPzoomoffsetx-nowx+parseInt(obj.style.width)+TJPborderthick+TJPshadowthick;
 }
 
 tmp=(1-2*TJPzoomoffsety)*(TJPborderthick+TJPshadowthick);
 
 if(nowy-TJPzoomheight*TJPzoomoffsety < tmp) {
  clip1=TJPzoomheight*TJPzoomoffsety-nowy+tmp;
 } else if(parseFloat(nowy-TJPzoomheight*TJPzoomoffsety+TJPzoomheight) > parseFloat(obj.style.height)+tmp) {
  clip3= TJPzoomheight*TJPzoomoffsety - nowy + parseFloat(obj.style.height)+tmp;
  nheight=TJPzoomheight*TJPzoomoffsety - nowy + parseFloat(obj.style.height)+TJPborderthick+TJPshadowthick;
 }
 stage.style.width=nwidth+'px';
 stage.style.height=nheight+'px';

 stage.style.clip='rect('+clip1+'px,'+clip2+'px,'+clip3+'px,'+clip4+'px)';

 if(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick) < 0) { t=-(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick))} 
 else if(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick) > parseFloat(obj.style.height)-TJPzoomheight+TJPborderthick*2+TJPshadowthick*2) { t=-TJPzoomamount*parseFloat(obj.style.height)+TJPzoomheight-TJPborderthick*2-TJPshadowthick*2-((nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick))-(parseFloat(obj.style.height)-TJPzoomheight+TJPborderthick*2+TJPshadowthick*2)); }
 else { t=(-TJPzoomamount*parseFloat(obj.style.height)+TJPzoomheight-TJPborderthick*2-TJPshadowthick*2)/(parseFloat(obj.style.height)-TJPzoomheight+TJPborderthick*2+TJPshadowthick*2)*(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick)) }
 stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.marginTop=t+'px';

 if(stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {
  stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.marginTop=t+'px';
 }

 if(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick) < 0) { t=-(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick))} 
 else if(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick) > parseFloat(obj.style.width)-TJPzoomwidth+TJPborderthick*2+TJPshadowthick*2) { t=-TJPzoomamount*parseFloat(obj.style.width)+TJPzoomwidth-TJPborderthick*2-TJPshadowthick*2-((nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick))-(parseFloat(obj.style.width)-TJPzoomwidth+TJPborderthick*2+TJPshadowthick*2)); }
 else { t=(-TJPzoomamount*parseFloat(obj.style.width)+TJPzoomwidth-TJPborderthick*2-TJPshadowthick*2)/(parseFloat(obj.style.width)-TJPzoomwidth+TJPborderthick*2+TJPshadowthick*2)*(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick)) }
 stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.marginLeft=t+'px';

 if(stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {
  stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.marginLeft=t+'px';
 }
}

function TJPinit() {
 TJPadjustx=0; TJPadjusty=0;
 if(navigator.userAgent.indexOf('MSIE')>-1) {TJPadjustx=2;TJPadjusty=2;}
 if(navigator.userAgent.indexOf('Opera')>-1) {TJPadjustx=0; TJPadjusty=0;}
 if(navigator.userAgent.indexOf('Safari')>-1) {TJPadjustx=1; TJPadjusty=2;}
}

// configuration - do not modify the following, instead read the behaviors.html file in the tutorial!
var TJPon=new Array();
var TJPadjustx,TJPadjusty;
var TJPmouse=0; var TJPmousey; var TJPmousex;
var TJPloading='<div style="background-color: #ffeb77; color: #333333; padding:2px; font-family: verdana,arial,helvetica; font-size: 10px;">Loading...</div>';

var TJPzoomwidth=160;
var TJPzoomheight=120;
var TJPzoomratio;
var TJPzoomwindowlock=0;

var TJPzoomoffsetx=.5;
var TJPzoomoffsety=.5;
var TJPzoomoffset;

var TJPzoomamount=4;
var TJPzoomamountmax=12;
var TJPzoomamountmin=1;

var TJPborderthick=2;
var TJPbordercolor='#888888';

var TJPshadowthick=8;
var TJPshadow='dropshadow/';

TJPinit();

// TJPzoom 3 * János Pál Tóth
// Docs @ http://valid.tjp.hu/tjpzoom/ 
// News @ http://tjpzoom.blogspot.com/

  2.js

 

// TJPzoom 3 configuration file * János Pál Tóth
// 2007.04.28
// Docs @ http://valid.tjp.hu/tjpzoom/ 
// News @ http://tjpzoom.blogspot.com/

// PURITYU
// no HTML border
// no drop shadow
// fixed zoom amount (TJPzoomamount==TJPzoomamountmax==TJPzoomamountmin)
// locked zoom window (no dragging left/right)

var TJPzoomwidth=320;              //zoom window size
var TJPzoomheight=200; 
var TJPzoomwindowlock=1;           //set to 1 to lock window size

var TJPzoomoffset='';   //turning off smart mode
var TJPzoomoffsetx=1/2; //where is the zoom box relative to the mouse cursor - choose a number between 0 and 1 and see what happens ;]
var TJPzoomoffsety=1/2;

var TJPzoomamount=4;
var TJPzoomamountmax=4;
var TJPzoomamountmin=4;

var TJPborderthick=0;              //border thickness, SET 0 to no borders
var TJPbordercolor='#ff0000';      //border color

var TJPshadowthick=0;              //shadow image size/2, SET 0 to have no shadows (saves cpu)
var TJPshadow='';                  // <>: n, ne, e, se, s, sw, w, nw - TJPshadow+'nw.png'

// TJPzoom 3 configuration file * János Pál Tóth
// Docs @ http://valid.tjp.hu/tjpzoom/ 
// News @ http://tjpzoom.blogspot.com/


html代码：

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>valid.tjp.hu - TJPzoom 3 - JavaScript / CSS / DOM image magnifier - Tutorial</title>

<script type="text/javascript" src="js\tjpzoom.js">
	
</script>
<script type="text/javascript">
 document.write('<scr'+'ipt type="text/javascript" src="tjpzoom_config_purity.js"></scr'+'ipt>');
</script>
</head>
<body>

<div>
<img src="img\dianshi.jpg" style="width:640px; height: 480px;" οnmοuseοver="TJPzoom(this);">
</div>
</body>
</html>



 

shizhan1881
关注
专栏目录
通过 javascript 实现局部放大图
04-11
NULL 博文链接：https://zwhc.iteye.com/blog/1682780
JS实现局部放大效果
10-23
JS实现局部放大效果,用JS做的对图片局部放大的效果 就像放大镜一样的效果
用javascript放大图片局部
a52202261的博客
09-22 104
<html> <head> <title>emu</title> </head> <body> <BR> 原图：<BR> <img src=http://img.pconline.com.cn/images/photo2/839980/1118509777...
JS实现局部放大(放大镜)效果
02-25
这是无意思遇到收集的，用JS做的对图片局部放大的效果 就像放大镜一样的效果
javascript实现图片局部放大效果
05-07
JavaScript 是一种广泛使用的客户端脚本语言，它可以动态地修改页面元素，实现图片局部放大的功能。本文将深入探讨如何使用 JavaScript 来实现这一效果。 首先，我们需要了解基本的 HTML 结构，通常我们会有一个...
JS实现图片局部放大或缩小的方法
11-30
在JavaScript中实现图片局部放大或缩小的功能，通常涉及到HTML、CSS和JavaScript的综合运用。以下是一种常见的实现方式，主要步骤如下： 1. **HTML结构**： 首先，你需要在HTML中创建一个主图片容器`...
js实现图片局部放大效果详解
10-17
在本文中，我们将详细探讨如何利用JavaScript技术实现图片的局部放大效果。这个过程涉及到的知识点主要有DOM操作和事件应用。 首先，DOM（文档对象模型）是一种与平台和语言无关的接口，允许程序和脚本动态地访问和...
JS图片局部放大效果
09-01
JS产品图片局部放大效果,原生JS仿京东放大镜图片局部放大显示代码
js实现图片局部放大
06-12
没有说明 自己看 实用的小东西
js实现局部放大镜效果
07-24
仿淘宝局部放大镜效果，可以点击图片来实现局部放大，是商城不错的选择
js图片局部放大效果
06-23
放大镜 js放大镜 图片局部放大效果，很好用，
用javascript制作放大镜放大图片
weixin_30487701的博客
11-03 58
<html><head><title>emu</title></head><body><BR>原图：<BR><imgsrc=http://www.web745.com/image/logo.gifwidth="280"height="150"id=srcImgonmouse...
用js实现对图片的局部放大
漂泊小柒的专栏
07-23 6103
Magnifier /* 原始图片所在的div*/ #magnifier{ width:342px; height:420px; position:absolute; top:100px; left:250px; font-size:0; border:1px solid #000; } /*原始图片*/ #img{ width:342px; height:
JavaScript之图片放大镜制作
weixin_44827643的博客
06-28 198
本文主要介绍如何利用元素的距离属性实现图片放大镜的效果。代码如下：
JavaScript实现图片局部放大效果教程
标题'js放大镜放大图片效果'明确指出了主题，描述中的关键词'通过js效果放大图片'表明了内容的核心，即利用JavaScript编程技术来增强图片的交互性，让用户在点击或鼠标悬停时能够动态地查看图像的细节。 在HTML部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值