我正在尝试练习 jQuery 事件,我想在点击事件时点击一些图片,只是为了使用多种效果。
目前,我有一个图像在悬停时会增长,然后在鼠标悬停时缩小。
一切正常,直到我取消注释 jQuery 中的注释代码。图像就这样消失了。我已经尝试了几乎所有我能想到的东西,但我不确定我哪里出错了。
我对 jQuery 很陌生,我正在通过其他项目的教程和源代码自学,所以我不会怀疑这是否只是我的愚蠢行为。
如果有人可以帮助我解决我的问题,我将不胜感激。到目前为止,错误修复似乎是我编码中最薄弱的部分。
$(document).ready(function() {
var preloadImgs = ['imgs/ptilota.jpg',
'imgs/cell_division.jpg',
'imgs/lynx_spiders.jpg'];
var imgs = [];
for (var i=0; i<preloadImgs.length; i++) {
imgs[i] = new Image();
imgs[i].src = preloadImgs[i];
}
var photo = $('#photo');
var imgVal = 0;
photo.attr('src',preloadImgs[imgVal]);
photo.hover(
function() {
$(this).stop().animate(
{
width: '1080px',
height: '682px'
}, 500
);
},
function() {
$(this).stop().animate(
{
width: '540px',
height: '341px'
}, 500
);
}
);
/* photo.click(
function() {
imgVal = imgVal + 1;
if (imgVal >= preloadImgs.length) {
imgVal = 0;
}
photo.attr('src',preloadImgs[imgVal]);
}
); */
});
这是 HTML:
<body>
<img src="" id="photo" />
</body>