首页 > 编程语言> 文章详细

javascript – 当点击该div中的图像时,如何翻转Div？

2019-08-31 18:34:43 阅读：256 来源： 互联网

标签：html javascript css3 flip

好吧,所以我对编写Javascript知之甚少,我可以稍微编辑一下,并且在CSS3动画中有点涉及.

我会给你一个我想要实现的东西的形象,然后在下面解释.

网站布局将是：http://i.imgur.com/XyhaxNP.jpg

我已经在Google上找到了一些方法,但是当用户将鼠标悬停在div上时,他们中的大多数似乎都会翻转div,我需要将它放在点击事件上,因为它还需要在移动设备上运行.

带有切换按钮的第三个演示就是我所看到的,但是当我将事件添加到图像时,这似乎不起作用.

这是我到目前为止,我已将onclick事件移动到图像(它曾经在我找到的演示中的按钮上)但它不能在图像上工作.

HTML：

<div class="flip-container">
    <div class="flipper">
        <div class="front">
            <img class="teamlogo" onclick="document.querySelector('#flip-toggle').classList.toggle('flip');" src="images/logo/niners.png"/>
        </div>
        <div class="back">
            Back of div content
        </div>
    </div>
</div>

CSS：

.teamlogo{
padding-left: 5%;
}

/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 320px;
height: 480px;
}

/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

/* front pane, placed above back */
.front {
z-index: 2;
}

/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}

所以在这个当前点,当你将鼠标悬停在它上面时,它会翻转,当你点击图像时我只需要翻转它.

这是一个有效的演示：http://jsfiddle.net/wvveY/1/

解决方法:

通常,您希望将JavaScript与HTML分开,但如果您希望将其放在标记内,那么最好放置代码引用的标记,即标记.这样,该div内的任何点击,无论是图像还是文本,都会触发翻转.

<div class="flip-container">
  <div class="flipper" onclick="this.classList.toggle('flipped')">
    <div class="front">
      Front
    </div>
    <div class="back">
      Back
    </div>
  </div>
</div>

然后你有CSS类：

.flipped {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  transform:rotateY(180deg);
}

看到它在这里工作：http://jsfiddle.net/wvveY/4/

标签：html,javascript,css3,flip
来源： https://codeday.me/bug/20190831/1777597.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 当点击该div中的图像时,如何翻转Div？