我目前正在为一家建筑公司HLArchitects制作一个网站。在项目页面中,我创建了一个HTML/Javascript图像库。将鼠标悬停在较小的缩略图上时,不透明度将从0.5更改为1。可在此处查看以供参考:http://www.hla.co.za/projects/Hyuandai_Training_Centre/
我的问题是,当你点击其中一个较小的缩略图,它会改变上面较大的图片,然后尝试悬停在另一个较小缩略图上时,它不再改变不透明度。我使用了一个简单的CSS :hover
来更改不透明度和transition: opacity 0.2s
。以下是缩略图点击事件的Javascript/Jquery:
var imageFlow = document.getElementById("imageFlow");
var img = imageFlow.getElementsByTagName("img");
$("#imageFlow img").click(function(){
var src = $(this).attr("src");
if (src != $('#displayImg img').attr("src")){
$('#displayImg img').fadeOut(200);
setTimeout(function(){$("#displayImg img").attr("src",src);}, 200);
$('#displayImg img').fadeIn(200);
}
for (var i = 0; i < img.length; i++) {
$(img[i]).css("opacity","0.5");
}
$(this).css("opacity","1");
})
HTML:
<div id="displayImg">
<img src="images/095.jpg">
</div>
<div id="imageFlow">
<img src="images/095.jpg" alt="095" width="" height="" />
<img src="images/105.jpg" alt="105" width="" height="" />
<img src="images/106.jpg" alt="106" width="" height="" />
<img src="images/110.jpg" alt="110" width="" height="" />
<img src="images/133.jpg" alt="133" width="" height="" />
<img src="images/137.jpg" alt="137" width="" height="" />
<img src="images/138.jpg" alt="138" width="" height="" />
<img src="images/141.jpg" alt="141" width="" height="" />
<img src="images/145.jpg" alt="145" width="" height="" />
<img src="images/149.jpg" alt="149" width="" height="" />
<img src="images/160.jpg" alt="160" width="" height="" />
<img src="images/DSC_0077.jpg" alt="DSC_0077" width="" height="" />
<img src="images/DSC_0091.jpg" alt="DSC_0091" width="" height="" />
<img src="images/DSC_0092.jpg" alt="DSC_0092" width="" height="" />
<img src="images/DSC_0093.jpg" alt="DSC_0093" width="" height="" />
<img src="images/DSC_0252.jpg" alt="DSC_0252" width="" height="" />
<img src="images/DSC_0357.jpg" alt="DSC_0357" width="" height="" />
<img src="images/DSC_0360.jpg" alt="DSC_0360" width="" height="" />
<img src="images/DSC_0380.jpg" alt="DSC_0380" width="" height="" />
</div>
我真的很感激有一个解决方案,这样即使你点击了其中一个缩略图,悬停效果也能发挥作用
提前感谢
var images = $("#imageFlow img");
images.on('click', function(){
var src = $(this).attr("src");
if (src != $('#displayImg img').attr("src")){
$('#displayImg img').fadeOut(200, function() {
$(this).attr("src", src).fadeIn(200);
});
}
images.removeAttr('style');
this.style.opacity = '1';
});
FIDDLE
此外,您的网站有两个打开的正文标记和奇怪的无效标记。
CSS:
#imageFlow img:hover,
#imageFlow img.active {
opacity: 1;
}
JS:
var $img = $("#imageFlow").find("img");
$img.click(function(){
var src = this.src;
if (src != $('#displayImg img')[0].src){
$(this).addClass('active').siblings('img').removeClass('active');
$('#displayImg img').stop().fadeTo(200,0, function(){
this.src = src;
$(this).fadeTo(200, 1);
});
}
});
仔细查看您的HTML元素,修复未关闭的标记、重复的标记、复制的ID元素等,以及页面控制台中弹出的其他JS错误。否则,您将在循环中运行;)
最初,当我在控制台中运行此程序时,我会收到以下错误:
TypeError: projs is null
var img = projs.getElementsByTagName('img');
您的脚本似乎在DOM中查找尚未加载的内容。
目前proj.js正在寻找尚未加载的元素。
脚本应该像imageFlow.js.