一、语法
- element.classList.toggle(className);
点击一张图片放大再次点击的时候缩小
3、demo代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>图片放大缩小 Demo</title>
- <style>
- .image-container {
- width: 200px;
- height: 200px;
- display: flex;
- justify-content: center;
- align-items: center;
- overflow: hidden; /* 超过容器尺寸的部分隐藏 */
- border: 1px solid #ddd;
- }
- .image-container img {
- width: 100%; /* 图片填充容器 */
- transition: transform 0.3s ease-in-out; /* 动画效果 */
- }
- /* 放大后的样式 */
- .image-container.enlarged img {
- transform: scale(1.8); /* 放大1.8倍 */
- }
- </style>
- </head>
- <body>
- <div class="image-container" id="imageContainer">
- <img src="https://via.placeholder.com/200" alt="点击放大缩小" id="image">
- </div>
- <script>
- // 获取元素
- const imageContainer = document.getElementById('imageContainer');
- // 点击事件
- imageContainer.addEventListener('click', () => {
- // 切换放大缩小效果
- imageContainer.classList.toggle('enlarged');
- });
- </script>
- </body>
- </html>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
