jquery 实现图片放大

超、凢脫俗 2023-07-16 03:40 37阅读 0赞

### 文章目录 ###

*   *  一、html、Jquery代码如下
     *  二、效果
     *   *  2.1、初始化加载的页面
         *  2.3、鼠标放到图片上时（即 \`hover\` 事件 ）， 图片放大为1.4倍
         *  2.3、鼠标点击（即 \`click\` 事件）后，图片放大：
         *  2.4、鼠标再次点击（ \`click\` 事件）后，放大的图片消失，恢复初始状态：

## 一、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、初始化加载的页面 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qaW4yMWNlbg_size_16_color_FFFFFF_t_70]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qaW4yMWNlbg_size_16_color_FFFFFF_t_70 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qaW4yMWNlbg_size_16_color_FFFFFF_t_70 2]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qaW4yMWNlbg_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qaW4yMWNlbg_size_16_color_FFFFFF_t_70]: /images/20230528/85e7b80494a7459d9a6694b6aac1aa49.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qaW4yMWNlbg_size_16_color_FFFFFF_t_70 1]: /images/20230528/06259385146a442f9b2b1f9828c2ce76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qaW4yMWNlbg_size_16_color_FFFFFF_t_70 2]: /images/20230528/9e212cd30ddf433d933aa0d431323eb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qaW4yMWNlbg_size_16_color_FFFFFF_t_70 3]: /images/20230528/93ac2a5c93fe4adfbae63e23922c2c78.png