www.webdeveloper.com
Results 1 to 8 of 8

Thread: how to make a element zoom in/out at the certain point.

  1. #1
    Join Date
    Mar 2011
    Posts
    6

    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?

  2. #2
    Join Date
    Mar 2009
    Posts
    452

  3. #3
    Join Date
    Mar 2011
    Posts
    6
    Thank you very much!!!
    This is what I expected while I have looking for a long time.!!

  4. #4
    Join Date
    Mar 2011
    Posts
    6
    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?

  5. #5
    Join Date
    Mar 2011
    Posts
    6
    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?

  6. #6
    Join Date
    Nov 2012
    Posts
    32
    thanks

  7. #7
    Join Date
    Mar 2009
    Posts
    452
    http://wayfarerweb.com/jquery/plugins/mapbox/ here you will find explanation with examples

  8. #8
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,688
    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>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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
  •  
HTML5 Development Center



Recent Articles