是否可以在第二次触摸屏幕时打开一张图片?
我在网上找不到文档!!
我必须做的:
Fist touch show title,为此我写了几行 js
,其中 img 的标题写在 a
标签内,鼠标悬停显示来自 img 的内容。
第二次触摸会在灯箱中打开图像。
$(".foto a").addClass("image");
$("a.image").each(function(){
$(this).attr('alt',$(this).find("img").attr('alt'));});
a.image {
display: block;
overflow: hidden
}
.image {
position: relative
}
.image img {
width: 100%;
vertical-align: top
}
.image:after, .image:before {
position: absolute;
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:after {
content: '\A';
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
}
.image:before {
content: attr(alt);
width: 100%;
color: #fff;
z-index: 1;
bottom: 0;
padding: 15px 20px;
font-size: 16px;
font-family: "futura-pt", sans-serif;
}
.image:hover:after, .image:hover:before {
opacity: 1;
}
目前这在桌面上运行良好,但在移动设备上却不行,因为第一次触摸时会打开灯箱。 所以我找到了在第二次触摸时打开图像的解决方案,在第一次触摸时可以看到悬停效果吗?
谢谢!
最佳答案
好的,伙计们,我发现这段代码工作得很好!!!
$(".foto a").addClass("image").addClass("taphover");
$("a.image").each(function(){
$(this).attr('alt',$(this).find("img").attr('alt'));
});
$('a.taphover').on('touchstart', function (e) {
'use strict'; //satisfy the code inspectors
var link = $(this); //preselect the link
if (link.hasClass('hover')) {
return true;
} else {
link.addClass('hover');
$('a.taphover').not(this).removeClass('hover');
e.preventDefault();
return false; //extra, and to make sure the function has consistent return points
}
});
我没有更改我的 css 和工作,但如果你想用新样式做一些事情,请使用:
a.taphover:hover, a.taphover.hover {
// css for hovering here
};
关于javascript - 第二次触摸灯箱打开图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42088297/