首页如何使用JavaScript实现点击按钮触发图片翻转并显示在页面上？

如何使用JavaScript实现点击按钮触发图片翻转并显示在页面上？

时间: 2025-01-06 17:48:49 浏览: 1

要使用JavaScript实现点击按钮触发图片翻转的效果，你可以采用CSS动画结合JavaScript的方式来实现。以下是一个简单的示例：首先，在HTML中，创建一个图片元素和一个点击按钮： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .flip-container { perspective: 1000px; } .flip-card { position: relative; width: 200px; height: 200px; cursor: pointer; transition: 0.6s; } .flip-card:hover .flipper, .flip-card.flipped .flipper { transform: rotateY(180deg); } .flipper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: transform 0.6s; } .front, .back { position: absolute; backface-visibility: hidden; width: 100%; height: 100%; } .front { background-color: #f9f9f9; color: black; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; } .back { background-color: #000; color: white; text-align: center; transform: rotateY(180deg); } </style> </head> <body> <button id="flipButton">Flip Image</button> <div class="flip-container" onclick="flipCard(this)"> <div class="flip-card"> <div class="front">正面</div> <div class="back">反面</div> </div> </div> <script src="script.js"></script>  </body> </html> ``` 然后，在`script.js`文件中编写JavaScript函数，当点击按钮时切换图片的样式： ```javascript function flipCard(container) { container.classList.toggle('flipped'); } ``` 这个例子中，当你点击“Flip Image”按钮时，图片会自动翻转。如果已经翻转，再点击就会恢复原状。

阅读全文