原生js常用的方法

在

开发中，可以使用

或 jQuery 来实现图片的放大效果。下面分别给出两种方法：

1.

方法：

 javascript // HTML 结构 // <img src=https://blog.csdn.net/Aria_Miazzy/article/details/"path_to_image.jpg" alt="Image" class="zoomable-image">  // CSS 样式 // .zoomable-image { // cursor: pointer; // }  // JavaScript 代码 const images = document.querySelectorAll('.zoomable-image');  images.forEach(image => { image.addEventListener('click', function() { // 创建放大图片的容器 const zoomContainer = document.createElement('div'); zoomContainer.classList.add('zoom-container'); document.body.appendChild(zoomContainer);  // 创建放大图片 const zoomedImage = document.createElement('img'); zoomedImage.src = this.src; zoomedImage.alt = this.alt; zoomContainer.appendChild(zoomedImage);  // 点击放大图片容器时关闭放大效果 zoomContainer.addEventListener('click', function() { this.remove(); }); }); }); 

2. 使用 jQuery 方法：

 javascript // HTML 结构与 CSS 样式 同上  // JavaScript 代码 $('.zoomable-image').on('click', function() { // 创建放大图片的容器 const zoomContainer = $('<div>').addClass('zoom-container'); $('body').append(zoomContainer);  // 创建放大图片 const zoomedImage = $('<img>').attr('src', this.src).attr('alt', this.alt); zoomContainer.append(zoomedImage);  // 点击放大图片容器时关闭放大效果 zoomContainer.on('click', function() { $(this).remove(); }); }); 

以上代码实现了点击图片时，在页面上创建一个放大的图片，并且点击放大的图片时可以关闭放大效果。你可以根据实际需求，对

和交互进行进一步的调整和优化。

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/2241.html