参考地址：https://blog.csdn.net/qq_42249896/article/details/86569636

一、应用场景：点击图片可以对图片进行放大显示。

二、实现代码:

说明：我用上述网址的方法，放大可以，但是缩小图片的点击事件失效，所以稍微修改了一点。

 <html>

 <head>

     <meta charset="UTF-8">

     <title></title>

  <!--任一版本的jquery都可以-->

 <script src="jquery-1.10.2.min.js"></script>

 <style>

  .enlargeImg_wrapper {

   display: none;

   position: fixed;

   z-index: 999;

   top: 0;

   right: 0;

   bottom: 0;

   left: 0;

   background-repeat: no-repeat;

   background-attachment: fixed;

   background-position: center;

   background-color: rgba(52, 52, 52, 0.8);

   background-size: 37%;

 }

 img:hover {

     cursor: zoom-in;

 }

 .enlargeImg_wrapper:hover {

     cursor: zoom-out;

 }

     </style>

 </head>

 <body>

     <img class="enlargeImg" width="80" src="1.jpg" title="点击查看大图" />

     <div class="imgBox"></div>

     <script type="text/javascript">

     $(function() {

         enlargeImg();

     })

     //关闭并移除图层

     function closeImg() {

         $('.enlargeImg_wrapper').fadeOut(200).remove();

     }

     //查看大图

     function enlargeImg() {

         $(".enlargeImg").click(function () {

             $('.imgBox').html("<div  class='enlargeImg_wrapper'></div>");

             var imgSrc = $(this).attr('src');

             $(".enlargeImg_wrapper").css("background-image", "url(" + imgSrc + ")");

             $('.enlargeImg_wrapper').fadeIn(200);

         })

         $('.imgBox').on('click', '.enlargeImg_wrapper', function () {

             $('.enlargeImg_wrapper').fadeOut(200).remove();

         })

     }

     </script>

 </body>

 </html>

jquery点击放大图片的更多相关文章

  1. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  2. jquery点击改变图片src源码并toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery点击改变class并toggle；jquery点击改变图片src源码并toggle；jquery显示隐藏toggle

    <html><head><meta charset="utf-8"><title></title><script ...

  4. js限制图片大小、点击放大图片、点击在新开页面显示

    缩放图片到合适大小        function ResizeImages() {            var myimg, oldwidth, oldheight;            var ...

  5. ios 点击放大图片,保存至手机相册

    直接贴.m文件代码 #import "UIImageView+Scale.h" static CGRect oldframe; @implementation UIImageVie ...

  6. jquery 鼠标经过放大图片

    jquery.elevatezoom.js文件请到演示文件查看 演示 JavaScript Code <script type="text/javascript"> $ ...

  7. html图片上传阅览并且点击放大

                  关闭   qq_31540195的博客       目录视图 摘要视图 订阅 异步赠书:9月重磅新书升级,本本经典           程序员9月书讯      每周荐书: ...

  8. JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用

    业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...

  9. img点击放大的js实现

    业务需要,从后台获取图片列表,用img标签展示,由于图片太小看不清,需要点击放大,类似如下效果: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto;设置滚动条,点击放大图片回到列 ...

随机推荐

  1. 其他综合-搭建本地yum仓库及自制rpm包

    搭建本地yum仓库及自制rpm包 实验目的 为方便本地 yum 的管理,建本地 yum 仓库,实现局域网内部快速安装常用软件 实验环境 VMware:12版本 系统版本:CentOS Linux re ...

  2. docker-nginx

    docker pull nginx docker run --name nginx -p 8080:80 -d nginx mkdir -p /data/nginx/www /data/nginx/l ...

  3. mysql左连接 右连接 内连接的区别

    mysql左连接 右连接 内连接的区别 1.内连接,显示两个表中有联系的所有数据; 2.左链接,以左表为参照,显示所有数据,右表中没有则以null显示 3.右链接,以右表为参照显示数据,,左表中没有则 ...

  4. 批处理命令 call

    call 命令 CALL命令可以在批处理执行过程中调用另一个批处理,当另一个批处理执行完后,再继续执行原来的批处理 CALL command 调用一条批处理命令,和直接执行命令效果一样,特殊情况下很有 ...

  5. 4.Vue双向绑定

    1.什么是双向数据绑定 Vue.js 是一个 MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也算是 Vue.js 的精髓之处了 ...

  6. Linux学习笔记-第1天（补发）- 新的开始

    本来不打算补发第一天的笔记,第一天讲的内容并不多,且大部分内容都是书本上已有的,就没有写多少笔记. 其实在学习的过程中我挺好奇其它同学各种千奇百怪的问题.想法是怎么来的,我怎么想不出来这些.或许这就是 ...

  7. 4.Go-结构体、结构体指针和方法

    4.1.结构体 结构体:将一个或多个变量组合到一起形成新的类型,这个类型就是结构体,结构体是值类型 定义结构体和赋值 //Learn_Go/main.go package main import &q ...

  8. 【2019.7.16 NOIP模拟赛 T2】折叠（fold）（动态规划）

    暴力\(DP\) 考虑暴力\(DP\),我们设\(f_{i,j}\)表示当前覆盖长度为\(i\),上一次折叠长度为\(j\)的方案数. 转移时需要再枚举这次的折叠长度\(k\)(\(k\ge j\)) ...

  9. Spring Cloud组件使用/配置小记

    仅使用,无多少技术含量,权记于此以备忘. 微服务架构下的主要组件 服务注册组件:Consul.Etcd等 网关:Zuul.Spring Cloud Gateway等 容错框架:Hystrix 负载均衡 ...

  10. 原生/CM系列网络叹号问题

    网络叹号问题: 原因:某墙屏蔽了谷歌,而原生安卓是利用谷歌的服务器来测试网络是否通畅的 解决方案:修改网络测试的服务器地址 方案来源:https://www.noisyfox.io/android-c ...