<!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>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.map {
position:relative;left:500px;width:351px;height:263px;border:solid red 1px;
}
#tst{
position:absolute;left:0px;top:0px;width:351px;height:263px;cursor:move;
}
.bar {
position:absolute;z-Index:2;left:10px;top:20px;width:10px;height:100px;background-Color:#FFCC66;
}
.slide {
position:absolute;z-Index:2;left:0px;top:0px;width:10px;height:20px;background-Color:#FFFFCC;cursor:move;
}
.bar IMG {
width:15px;height:15px;cursor:pointer;
}
.up {
position:absolute;z-Index:2;left:-2px;top:-18px;width:15px;height:15px;background-Color:red;text-Align:center;
}
.down {
position:absolute;z-Index:2;left:-2px;top:103px;width:15px;height:15px;background-Color:red;text-Align:center;
}
/*]]>*/
</style></head>
<body>
<div class="map" >
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" />
<div id="bar" class="bar" >
<div class="slide" ></div>
<img class="up" src="http://www.vicsjavascripts.org.uk/StdImages/Up1.gif" alt="up" />
<img class="down" src="http://www.vicsjavascripts.org.uk/StdImages/Down1.gif" alt="up" />
</div>
</div>
http://www.webdeveloper.com/forum/showthread.php?269177-how-to-make-a-element-zoom-in-out-at-the-certain-point.&daysprune=30
<script type="text/javascript">
/*<![CDATA[*/
// Click Zoom Drag (27-November-2012)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcClickZoomDrag={
init:function(o){
var id=o.ImageID,z=o.ClickZoom,mz=o.MaxZoom,ms=o.ZoomSpeed,bar=document.getElementById(o.BarID),img=document.getElementById(id),p=img.parentNode,s,b,bm;
p.style.overflow='hidden';
img.style.position='absolute';
img.style.left='0px';
img.style.top='0px';
o=zxcClickZoomDrag['zxc'+id]={
mary:[['left','offsetLeft'],['top','offsetTop'],['width','width'],['height','height']],
img:img,
w:img.width,
h:img.height,
p:p,
pw:p.offsetWidth,
ph:p.offsetHeight,
z:typeof(z)=='number'?z:2,
cz:1,
mz:typeof(mz)=='number'&&mz>z?mz:z,
ms:typeof(ms)=='number'?ms:1000,
ck:true,
drag:false,
bd:false,
s:false
}
if (bar){
s=bar.getElementsByTagName('*')[0];
if (s){
s.style.top='0px';
o.s=s,
o.bm=bar.offsetHeight-s.offsetHeight;
this.addevt(s,'mousedown','bardown',o);
this.addevt(bar,'mousemove','move',o);
}
b=bar.getElementsByTagName('*')[1];
if (b){
this.addevt(b,'mousedown','button',o,-.5);
}
b=bar.getElementsByTagName('*')[2];
if (b){
this.addevt(b,'mousedown','button',o,.5);
}
}
this.addevt(img,'mousedown','down',o);
this.addevt(img,'mousemove','move',o);
this.addevt(document,'mouseup','up',o);
},
down:function(e,o){
var mse=this.mse(e),p=this.pos(o.p),x=mse[0]-p[0],y=mse[1]-p[1],ok=(e.target?e.target:e.srcElement)==o.img;
if (ok){
if (o.ck&&ok){
o.ck=false;
this.zoom(o,[Math.max(-x*o.z+o.pw/2,-o.w*o.z+o.pw),Math.max(-y*o.z+o.ph/2,-o.h*o.z+o.ph),o.w*o.z,o.h*o.z]);
}
else if (ok){
document.onselectstart=function(event){ window.event.returnValue=false; }
o.xy=mse;
o.drag=o.img;
}
}
this.rtn(e);
},
button:function(e,o,ud){
var x=(parseInt(o.img.style.left)-o.pw/2)/o.z,y=(parseInt(o.img.style.top)-o.ph/2)/o.z;
o.drag=false
o.ck=false;
o.z=Math.min(Math.max(o.cz+ud,1),o.mz);
this.zoom(o,[Math.max(x*o.z+o.pw/2,-o.w*o.z+o.pw),Math.max(y*o.z+o.ph/2,-o.w*o.z+o.pw),o.w*o.z,o.h*o.z]);
},
zoom:function(o,ary,ms){
o.cz=o.z;
if (o.s&&!ms){
o.s.style.top=o.bm*(o.z-1)/(o.mz-1)+'px';
}
ary[0]=Math.min(ary[0],0);
ary[1]=Math.min(ary[1],0);
ary[2]=Math.max(ary[2],o.w);
ary[3]=Math.max(ary[3],o.h);
for (var z0=0;z0<ary.length;z0++){
clearTimeout(o['dly'+z0]);
this.animate(o,o.mary[z0][0],o.img[o.mary[z0][1]],ary[z0],new Date(),ms||o.ms,'dly'+z0)
}
},
bardown:function(e,o){
document.onselectstart=function(event){ window.event.returnValue=false; }
o.xy=this.mse(e);
o.lt=this.mse(e);
o.drag=o.s;
},
move:function(e,o){
if (o.drag){
var xy=this.mse(e),x=parseInt(o.drag.style.left),y=parseInt(o.drag.style.top),p;
if (o.drag==o.img){
o.drag.style.left=Math.max(Math.min(x+xy[0]-o.xy[0],0),-o.img.width+o.pw)+'px';
o.drag.style.top=Math.max(Math.min(y+xy[1]-o.xy[1],0),-o.img.height+o.ph)+'px';
}
else {
y=Math.min(Math.max(y+xy[1]-o.xy[1],0),o.bm);
o.drag.style.top=y+'px';
p=[(parseInt(o.img.style.left)-o.pw/2)/o.z,(parseInt(o.img.style.top)-o.ph/2)/o.z];
o.ck=false;
o.z=Math.min(Math.max(y/o.bm*(o.mz-1)+1,1),o.mz);
this.zoom(o,[p[0]*o.z+o.pw/2,p[1]*o.z+o.ph/2,o.w*o.z,o.h*o.z],o.ms/2);
if (Math.abs(o.z-o.cz)>.49){
o.cz=Math.min(Math.max(o.cz+.5*(o.z>o.cz?1:-1),1),o.mz);
o.z=o.cz;
}
}
o.xy=xy;
this.rtn(e);
}
},
up:function(e,o){
if (o.drag){
o.drag=false;
document.onselectstart=null;
}
},
rtn:function(e){
if(e.stopPropagation){
e.stopPropagation();
}
if (!window.event){
e.preventDefault();
}
e.cancelBubble=true;
e.cancel=true;
e.returnValue=false;
return false;
},
animate:function(o,mde,f,t,srt,mS,dly){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
now=Math.max(now,f<0||t<0?now:0);
o.img.style[mde]=now+'px';
}
if (ms<mS){
o[dly]=setTimeout(function(){ oop.animate(o,mde,f,t,srt,mS,dly); },10);
}
else {
o.img.style[mde]=t+'px';
}
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](e,p,p1); }, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](e,p,p1); });
}
}
}
zxcClickZoomDrag.init({
ImageID:'tst', // the unique ID name of the image. (string)
ClickZoom:2, //(optional) the zoom when the the image is first clicked. (number, default = 2)
ZoomSpeed:1000, //(optional) the zoom animation duration in milli seconds. (number, default = 1000)
MaxZoom:4, //(optional) the maximum image zoom animation duration in milli seconds. (number, default = ClickZoom)
BarID:'bar' //(optional) the unique ID name of the zoom slider bar element. (string, default = no slider bar)
});
/*]]>*/
</script>
</body>
</html>
