CODEWITHSUNDEEP
javascriptjqueryzooming
Leo Chan
Leo Chan

Reputation: 4427

How to calculate the origin that starting zoom using jQuery?

Zooming illustration

Currently the zooming action is illustrate like the top graph. I would like to achieve the zoom action in bottom graph. The point is the zoom origin .Currently the codes are:

        $("#popup").css("width",ui.value+"%");
    $("#largeText").css("width",ui.value+"%");
        $("#largeImg").css("width",ui.value+"%");

Where UI value is the width in percantage (eg. width : 100% , width : 200%) The height is set as auto.

Thanks

Upvotes: 0

Views: 557

Answers (2)

David Surprenant
David Surprenant

Reputation: 86

I don't know if that will give you answer but heres an exemple of an animation

Here's the exemple: http://jsfiddle.net/pRccr/6/

<div class="global">
<div class="item"></div>

​

CSS ::::::

.global {
      width:600px;
      height:600px;    
      background-color:#ff00ff;
      position:relative;
    }

    .item{
      position:absolute;
      width:3px;
      height:3px;
      background-color:#000;   
    }

JAVASCRIPT :::::

var start_size = 20;

var timer=setInterval(function(){

     start_size ++;

        $('.item').css('height',start_size+'px');
        $('.item').css('width',start_size+'px');

        $('.item').css('top', ($('.global').height()/2 - $('.item').height()/2) +'px');
        $('.item').css('left', ($('.global').width()/2 - $('.item').width()/2)+'px');

}, 50);​

Upvotes: 1

Justin McDonald
Justin McDonald

Reputation: 2166

This will depend on your elements' positioning on the page. I expect, to get the result you want in your image, you will have to center the element on your page both vertically and horizontally.

margin:auto auto;
width:?px;
height:?px;

Upvotes: 0

Related Questions