[英]Image Overlay jQuery - Get Image to Stay on Click
I am using the following code to display an overlay image when the base-image is hovered over: 当基础图像悬停在上方时,我使用以下代码显示叠加图像:
$(".roll").css("opacity","0");
$(".roll").show();
// on mouseover
$(".roll").hover(function () {
var s = $(this).siblings('img');
var w = s.css("width");
var h = s.css("height");
$(this).css("height",h).css("width",w).stop().animate({
opacity: .6 },
"fast");
},
// on mouseout
function () {
$(this).stop().animate({
opacity: 0
}, "fast");
});
This is what the HTML looks like: HTML如下所示:
<a class="image" href="#">
<span class="roll" style="display:none;"></span>
<img src="mypic.png" class="image">
</a>
How do I implement an "on click" event, so that when the image is clicked, the overlay remains instead of disappearing upon mouseout. 如何实现“单击时”事件,以便在单击图像时,覆盖层保留不变,而不是在鼠标移开时消失。
I've gotten started with the following, but not sure what else to do: 我已经开始以下工作,但不确定要做什么:
$('.roll').on("click", function() {
if ($(this).hasClass("selected")) {
$(this).removeClass("selected");
// remove overlay here?
}
else if (!$(this).hasClass("selected")) {
$(this).addClass("selected");
// add overlay here?
}
});
Probably easy, but I'm not sure how to carry it out beyond the basic mouseover/mouseout. 可能很容易,但是我不确定如何将其执行超出基本的鼠标悬停/鼠标悬停。
Thanks! 谢谢!
you can prevent on mouse out function when img has not class selected like 您可以在img未选择类的情况下防止鼠标退出功能
//on mouseout
function () {
if (!$(this).hasClass("selected"))
{
$(this).stop().animate({
opacity: 0
});
}
}
Means you have to check in mouseover/out function that: your images has already clicked or not? 意味着您必须检查以下鼠标悬停/移出功能:您的图像是否已单击?
Do you want the overlay image to receive the click event, or the base image? 您是否希望叠加层图像接收点击事件,还是基本图像? I'm going to assume the base image, but the implementation should be basically the same.
我将假定基本映像,但是实现应该基本相同。
// declare a flag in the outer scope
var stickImage = false;
$(".roll").css("opacity", "0");
$(".roll").show();
// on mouseover
$(".roll").hover(function() {
var s = $(this).siblings('img');
var w = s.css("width");
var h = s.css("height");
$(this).css("height", h).css("width", w).stop().animate({
opacity: .6
}, "fast");
});
// on click, toggle the stickImage boolean
$(".roll").click(function() {
stickImage = !stickImage;
});
// on mouseout
function() {
// check to make sure stickimage is false before hiding
if (!stickImage) {
$(this).stop().animate({
opacity: 0
}, "fast");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.