我有4个部分 - 每个部分都有一个图像和一些文字。
<div class=container>
<div class=row>
<div class="1"> img 1 </div>
<div class="1"> img 2 </div>
</div>
<div class=row>
<div class="1"> img 3 </div>
<div class="1"> img 4 </div>
</div>
我试图让图像翻转效果 - 那里有很多东西。
当我悬停或触摸(移动)时 - 我希望图像翻转并显示一些文字。
我要做的是允许系统只允许一个图像保持翻转一些文本。
我想开始(当加载页面时)只有图像1被翻转文本 - 而另外4个是图像。当某人徘徊/触摸其他图像时,img 1重置 - 另一个显示文本。
任何可以帮助我的模块?我已经使用jquery最新和纯/骨架像响应图像。
EDIT1:
通过翻转效果 - 我的意思是
http://codepen.io/ilanf/pen/gjoKl
感谢
答案 0 :(得分:2)
首先“干得好!”。我喜欢你的效果。
回答你的问题:
要在页面加载时翻转其中一个图像,您必须将其与其余图像分开,并使用backface
作为默认状态。通过“单独”,我的意思是,使用不同的类名,ID或名称。
现在,根据你给我们的编码器提示,除了图像之外,不可能同时翻转图像,因为当触发mouseout
事件时图像会翻转回默认状态。 p>
要在另一个图像悬停时翻转默认情况下文本可见的图像,请使用此jQuery脚本:
/* Let's suppose you give the image you want originally flipped an
extra class = "default-flipped" */
$(".1").on("mouseover", function() {
if ($(this).siblings().hasClass("default-flipped")) {
$("default-flipped").css("transform", rotateY(180deg);
}
});
正如我所承诺的,这是你所要求的工作版本;或者基本上我理解你的要求。
既然你已经找到了喜欢和想要复制的工作小提琴,我想尝试重新发明轮子将是完全没有意义的。
→虽然有一些事情需要添加到CSS中,当然还有一些jQuery:
/* We create a pre-flipped class for the element you want already flipped
when the page loads. */
.pre-flipped {
transform: rotateY(180deg);
/* That's what the card are supposed to do on hover
Our already flipped card must already have this rule
in order to be flipped from the start. */
}
/* If you want the images to be inline change the display
from block to inline-block as shown: */
.flip-images .card-wrapper {
display: inline-block;
}
在您的小提琴的CSS中,有一段代码如下所示,用于在悬停时翻转卡片:
.flip-images .card-wrapper:hover .card {
transform: rotateY(180deg);
} /* I removed it and as it makes things complicated
when trying to create the hover effect from jQuery. */
从CSS的角度来看就是这样。
$(document).ready(function() {
// mouseover event
$(".card-wrapper").on("mouseover", function() {
// Always leaves one open
$(this).children().css("transform", "rotateY(180deg)");
$(this).siblings().children().css("transform", "rotateY(0deg)");
});
});
检查此codepen以查看其工作原理! ?