javascript - 通过单击另一个 div 更改和 kenburn 缩放网页背景图像

Question

我需要通过单击另一个 div 更改和 kenburn 缩放，我的网页背景图像。

你能告诉我怎么做吗？

在这里查看我的代码

$(document).ready(function () {

    $('.box1').on('click', function () {

        $('.kenburns').addClass('zoom');
    });
});

Answer 1

您需要将css更改为

.kenburns.zoom {
    -webkit-transform: scale(2) rotate(0.1deg);
    -moz-transform: scale(2) rotate(0.1deg);
}

演示：小提琴

如果您的 html 标记与小提琴相同，那么

$(document).ready(function () {
    $('.box1').on('click', function () {
        $(this).parent('.kenburns').addClass('zoom');
    });
});

您需要将缩放过渡添加到.kenburns元素，而不是其后代