jquery 图片点击放大预览

置顶

九亓

已于 2023-09-10 13:44:16 修改

阅读量4.9k

点赞数 3

分类专栏：前端开发 jquery 文章标签： jquery css3 html

于 2021-10-26 10:46:54 首次发布

本文链接：https://blog.youkuaiyun.com/changshataofan/article/details/120966432

版权

这篇博客分享了一个简单的图片预览功能的实现，包括可缩放和拖动的相册弹窗。通过HTML、CSS和JavaScript，创建了一个全屏遮罩层和图片展示区域，支持左右切换和图片滚轮缩放，并提供了鼠标拖动图片的功能。代码简洁实用，适合在项目中复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个简单相册预览功能，可缩放可拖动，只是觉得这个功能应该很常用，先记录下来方便下次
代码也都是我在项目中抠出来的，如果有什么问题可以给我留言

在这里插入图片描述

html


	图片列表的样式我就不写出来了  但是下面的class 和 布局结构 都很重要

    <div class="imgnyr" style="width:100%;">
        <div class="img-list"><img class="seeimg" src="images/banner.jpg" ></div>
        <div class="img-list"><img class="seeimg" src="images/banner.jpg" ></div>
        <div class="img-list"><img class="seeimg" src="images/banner.jpg" ></div>
        <div class="img-list"><img class="seeimg" src="images/banner.jpg" ></div>
    </div>


	查看图片的弹窗代码(核心)
	
	<div class="seeImg_mask"></div>	
	<div class="seeImg_popup">
		<div class="seeImg_close">×</div>
		<div class="seeImg_swrieb">
			<ul class="seeImg_list" >
			</ul>
		</div>
		<div class="seeImg_fun">
			<div class="fun_label labelLeft">«</div>
			<div class="fun_label labelRight">»</div>
		</div>
	</div>

弹窗的样式


	.seeImg_mask{
    width:100%; height: 100%; position: fixed; top: 0px;

最低0.47元/天解锁文章