1

我有这个 jquery 代码，它使用 html img 控件并在我悬停时更改它们的大小问题是窗口中的每个“img”都受此影响。

我的问题是如何更改我的代码，使其仅与空间图像有关，

请看我的小提琴 jquery 代码

$(document).ready(function () {
var cont_left = $("#container").position().left;
$("a img").hover(function () {
    var $this = $(this);
    $this.closest('.img').css('z-index', 1);

    var orig = $this.data('orig');
    if (!orig) { // caching the original sizes via `jQuery.data`
        orig = {
        width: this.width,
        height: this.height
        };
        $this.data('orig', orig);
    }
    $this.stop(true, false).animate({
        width: orig.width * 1.3,
        height: orig.height * 1.3,
        left: -(orig.width * 0.3 / 2),
        top: -(orig.height * 0.3 / 2)
    }, 300);
}, function () {
    var $this = $(this),
        orig = $this.data('orig');
    if (!orig) {
        return false;
        // should never be here, as it means calling 'mouseleave' without 'mouseenter'
    }
    $this.closest('.img').css('z-index', 0);
    // hover out
    $this.stop(true, false).animate({
        width: orig.width,
        height: orig.height,
        left: 0,
        top: 0
    }, 300);
});
$(".img").each(function (index) {
    var left = (index * 160) + cont_left;
    $(this).css("left", left + "px");
});
});

我可以使用名称属性吗？还是“img”以外的东西？

4

2 回答 2

3

是的。给它一个类“.class”选择器或一个 ID。

“a img”会选择 DOM 中位于其上方某处的任何带有链接的图像，这就是为什么它比您预期的要拉伸得更远的原因。

HTML：

<img class="selectMe" src="ponies.jpg" />

ECMAScript

$(".selectMe").hover(function(){  doStuff();};

作为参考，你应该看看这个人： http ://api.jquery.com/category/selectors/

于 2013-11-06T13:55:33.297 回答
1

看这里链接

CSS：

<img id='first' src="http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" width="350" />

JS：

var cont_left = $("#container").position().left;
$("img#first").hover(function () {
    var $this = $(this);
    $this.closest('.img').css('z-index', 1);

var orig = $this.data('orig');
if (!orig) { // caching the original sizes via `jQuery.data`
    orig = {
    width: this.width,
    height: this.height
    };
    $this.data('orig', orig);
}
$this.stop(true, false).animate({
    width: orig.width * 1.3,
    height: orig.height * 1.3,
    left: -(orig.width * 0.3 / 2),
    top: -(orig.height * 0.3 / 2)
}, 300);

您可以在此处找到有关 jQuery 选择器的更多信息。

于 2013-11-06T13:58:50.483 回答