Question

我试图根据鼠标滚轮旋转“调整大小”一个被调用的“视图” 对于向下旋转，应减小尺寸，对于向上旋转，应增大尺寸。我不知道这样做。请有人帮助我实现它。
这是我的HTML代码..

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

我的jQuery代码是

$('.view').css('height','100px')
$('.view').css('width','100px')
$('.view').css('background-color','blue')
$('.view').mousewheel(function()
              {
                  alert('Hello');
              });

我认为这是错误的做法。希望我会得到帮助。

Answer 1

$('.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);
});

演示 - http://jsfiddle.net/scpDH/

Answer 2

有插件可供使用，例如查看this演示页。

Answer 3

你可以这样做（假设你有mousewheel扩展名）：

$('.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 );

});

在这里摆弄：http://jsfiddle.net/nicolapeluchetti/yTEJL/

根据鼠标滚轮旋转调整DIV的大小

3 个答案: