|
-
how to make a element zoom in/out at the certain point.
Hi
For an element like a div,how to make it zoom in/out at the certain point?
For example, when you visit bing maps.
Take the map container as an element,when you scroll on the map,the map will zoom in out at the point where your mouse live.
How to make it?
-
-
 Originally Posted by ZABI
Thank you very much!!!
This is what I expected while I have looking for a long time.!!
-
Hi,ZABI:
I read the exmaple,and I found that there is no explanation.
I wonder if someone can give me some suggestion about the implemention?
-
Originally Posted by ZABI
Hi,
Thank you very much,this is what I expected effection.
However I found that there is no explaination there,can you give me some suggestion about the implementation?
-
-
http://wayfarerweb.com/jquery/plugins/mapbox/ here you will find explanation with examples
-
Code:
<!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>
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
|
Reply With Quote
Bookmarks