Resize a DIV based on Mousewheel spin

i am trying to "resize" a called "view" based on the mouse wheel spin.

For down spin the size should be decreased and for up spin the size should be increased. I don't have any idea to do it. Please someone help me to achieve it.

Here is my HTML code..

<div class="main"><div class="view"></div></div>

and my jQuery code is

$('.view').css('height','100px')
$('.view').css('width','100px')
$('.view').css('background-color','blue')
$('.view').mousewheel(开发者_如何转开发function()
              {
                  alert('Hello');
              }); 

I think it is wrong way of doing. Hope i will get help.

$('.view').css('height', '100');
$('.view').css('width', '100');
$('.view').css('background-color', 'blue');
$('.view').mousewheel(function(event, delta) {
    var delta_px = delta > 0 ? "+=50" : "-=50";
    $(this).css('width', delta_px);
});

Demo - http://jsfiddle.net/scpDH/

There are plugins for this, for example have a look at this demo page.

You could do (assuming you have the mousewheel extension):

$('.view').css('height', '100px')
$('.view').css('width', '100px')
$('.view').css('background-color', 'blue');
var step = 10;

$('.view').mousewheel(function(event, delta) {
    var movement = 0;
    var dir = delta > 0 ? true : false,
        vel = Math.abs(delta);
    var height = parseInt($('.view').css('height'), 10);
    var width = parseInt($('.view').css('width'), 10);
    if (dir === true) {
        movement += step;
    } else {
        movement -= step;
    }
    console.log(movement);
    $('.view').css('height',height + movement );
    $('.view').css('width',width+ movement );

});

fiddle here: http://jsfiddle.net/nicolapeluchetti/yTEJL/