körös szar, nagyítás

by sas_sam

HTML

<html>

<body>
    <div id="cont">
        <div id="div">
            <img src="http://i.imgur.com/kXGVn.png" id="kep" />
            <div id="h1" class="obj"></div>
            <div id="h2" class="obj"></div>
            <div id="h3" class="obj"></div>
            <div id="h4" class="obj"></div>
            <div id="h5" class="obj"></div>
            <div id="h6" class="obj"></div>
        </div>
    </div>
    <div id="info">
        Adatok:
        
    </div>
</body>
</html>

CSS

body {
    position: relative;
}
#cont{
    position: relative;
    top: 50px;
    left: 50px;
    border: 1px solid black;
    z-index: 0;
    width: 106px;
    height: 106px;
    margin-bottom: 100px;
}
#div {
    background-color: yellow;
    width: 106px;
    height:106px;
    z-index: 0;
}
#kep {
    position: absolute;
    z-index: 100;
    background: rgba(255,255,255,0.5);
}
.obj{
    cursor: pointer;
    position: absolute;
    z-index: 5;
    width: 20px;
    height: 20px;
}
#h1 {
    background-color: red;
    top: 15px;
    left: -5px;
}
#h2 {
    background-color: green;
    top: 15px;
    left: 90px;
}
#h3 {
    background-color: blue;
    top: 70px;
    left: -5px;
}
#h4 {
    background-color: brown;
    top: 70px;
    left: 90px;
}
#h5 {
    background-color: magenta;
    top: -5px;
    left: 45px;
}
#h6 {
    background-color: cyan;
    top: 90px;
    left: 45px;
}

#info {
    position: relative;
    clear: both;
}

JavaScript

$(function(){
    $("#kep").click(function() {
        var box, data;
        
        boxes=new Array("#h1", "#h2", "#h3", "#h4", "#h5", "#h6");
        //boxes=new Array("#h2");
        for(i in boxes) {
            org_w=20;
            org_h=20;
            //$(boxes[i]).animate({width: '+=10', height: '+=10'}, 200).animate({width:org_w, height: org_h}, 50);
            $(boxes[i]).scale(1.5);
        }
    });
    
    $.fn.scale = function (val, duration, options)
    {
        var style = $(this).css('transform');
        
        if (typeof val == 'undefined')
        {
            if (style)
            {
                var m = style.match(/scale\(([^)]+)\)/);
                if (m && m[1])
                {
                    return m[1];
                }
            }
            
            return 1;
        }
        
        $(this).css(
            'transform',
            style.replace(/none|scale\([^)]*\)/, '') + 'scale(' + val + ')'
        );
        
        return this;
    }    
        
    $.fx.step.scale = function (fx)
    {
        $(fx.elem).scale(fx.now);
    }

    var $elie = $("#div");
    rotate(0);
    function rotate(degree) {
        $("#kep").trigger("click");
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});                      
        timer = setTimeout(function() {
            rotate(++degree);
        },50);
    }
   
});