我有这个jquery代码,它使用html img控件并在我悬停时更改它们的大小 问题是窗口中的每个“img”都受此影响。
我的问题是如何更改我的代码,使其仅与空间图像相关,
请参阅我的Fiddle 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”以外的其他内容?
答案 0 :(得分:3)
是。给它一个类“.class”选择器或ID。
“一个img”选择DOM中位于其上方的链接的任何图像,这就是为什么它比你期望的那样伸展得更远。
<强> HTML 强>:
<img class="selectMe" src="ponies.jpg" />
<强>的ECMAScript 强>
$(".selectMe").hover(function(){ doStuff();};
作为参考,你应该看看这个人: http://api.jquery.com/category/selectors/
答案 1 :(得分:1)
看这里link
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选择器here的更多信息。