jquery 实现图片放大

文章目录1、html、Jquery代码如下2、实始化加载的页面3、鼠标放到图片上时（ `hover` ），图片放大4、鼠标点击（ `click` ）后，图片放大：5、鼠标再次点击（ `click` ）后，放大的图片消失：1、html、Jquery代码如下<!DOCTYPE html><html><head><title>enlarge-i...

猎人在吃肉

4116人浏览 · 2020-03-17 18:49:00

猎人在吃肉 · 2020-03-17 18:49:00 发布

文章目录

一、html、Jquery代码如下

<!DOCTYPE html>
<html>
<head>
<title>enlarge-img</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>

<style>
#enlarge-div {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2;
    width: 100%;
    height: 100%;
    display: none;
}
 
#enlarge-div:hover {
    cursor: zoom-out;
}
 
#enlarge-div #inner-div {
    width: 80%;
    height: 85%;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
 
#enlarge-div #inner-div #big-img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
}


.enlarge-img {  
	cursor: zoom-in;  
	transition: all 0.6s;  
}

.enlarge-img:hover {  
	transform: scale(1.4);  
}

</style>
</head>
<body>

	<h1>jquery 图片放大</h1>

	<img class="enlarge-img" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb"    style="height:80px; max-width:80px;">
	<img class="enlarge-img" src="https://images.pexels.com/photos/620337/pexels-photo-620337.jpeg?auto=compress&cs=tinysrgb"    style="height:80px; max-width:80px;">
	<img class="enlarge-img" src="https://images.pexels.com/photos/2088167/pexels-photo-2088167.jpeg?auto=compress&cs=tinysrgb"  style="height:80px; max-width:80px;">
	<img class="enlarge-img" src="https://images.pexels.com/photos/1658967/pexels-photo-1658967.jpeg?auto=compress&cs=tinysrgb"  style="height:80px; max-width:80px;" >
	 
	<div id="enlarge-div">
		<div id="inner-div">
			<img id="big-img" src=""/>
		</div>
	</div>



<script type="text/javascript">

$(function () {
	$(".enlarge-img").click(function () {
		$("#big-img").attr("src", $(this).attr("src"));//设置#big-img元素的src属性

		$("#enlarge-div").fadeIn("fast");//显示弹出层

		$("#enlarge-div").click(function () {//关闭弹出层
			$(this).fadeOut("fast");
		});
	});
});
</script>
</body>
</html>

二、效果

2.1、初始化加载的页面

在这里插入图片描述

2.2、鼠标放到图片上时（即 `hover` 事件），图片放大为1.4倍

在这里插入图片描述

2.3、鼠标点击（即 `click` 事件）后，图片放大：

在这里插入图片描述

2.4、鼠标再次点击（ `click` 事件）后，放大的图片消失，恢复初始状态：

在这里插入图片描述

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

【计算机视觉】Pixel逐像素分类&Mask掩码分类理解摘要

魔乐社区

计算机视觉（opencv）实战三十二——CascadeClassifier 人脸微笑检测（摄像头）

本文从原理到实现，详细介绍了基于 OpenCV Haar 分类器的人脸与微笑检测：讲解了 Haar 特征和级联检测原理。对代码逐行拆解并解释参数含义。画出完整流程图，帮助理解执行过程。给出了常见问题和优化建议，甚至扩展到深度学习方法。这种方法简单、轻量、实时性好，非常适合入门和小型应用项目。但如果需要更高准确率和更强鲁棒性，建议使用深度学习检测器替代 Haar 分类器。