javascript - Kenburn 缩放图像效果不起作用

Question

我需要通过单击来缩放具有 Kenburns 效果的图像。然而，这不起作用。

代码：

$(document).ready(function () {

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

    $('.kenburns').addclass('img.zoom');
    });
});

JSFiddle

Answer 1

您的 jQuery 代码有一些问题：

首先，addclass应该是addClass。Javascript 区分大小写。

其次，addClass附加到的元素是针对父 div，而不是图像本身。本质上，您试图将 CSS 转换应用于 div 而不是图像，而您实际上想将其应用于图像。要将类添加到图像而不是父 div，请用作您的选择器：

$('.kenburns img')

代替 ...

$('.kenburns')

或者，也许性能更高，您可以使用

$('.kenburns').children('img')

最后，您尝试添加到图像的类名不正确。addClass接受 CSS 类名（“zoom”），而不是 CSS 选择器（“img.zoom”）。

更正的代码：

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

工作JSFiddle