参考地址：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. 5.如何基于 dubbo 进行服务治理、服务降级、失败重试以及超时重试？

    作者:中华石杉 面试题 如何基于 dubbo 进行服务治理.服务降级.失败重试以及超时重试? 面试官心理分析 服务治理,这个问题如果问你,其实就是看看你有没有服务治理的思想,因为这个是做过复杂微服务的 ...

  2. 模板渲染 templates

    目录 一.模板含义 二.模板的组成 三.逻辑控制代码 变量 标签 自定义过滤器 模板继承 一.模板含义 模板虽然是HTML文件,但是Django不是直接把HTML文件返回给用户,而是经过了 模板语言的 ...

  3. centos7 下面显卡驱动安装

    一.安装驱动 屏蔽默认的nouveau cd /lib/modprobe.d/ sudo vim dist-blacklist.conf 将nvidiafb注释掉 #blacklist nvidiaf ...

  4. 水晶报表报错：log4net初始值问题

    运行水晶报表的程序一直出错,报错如下: System.TypeInitializationException: “CrystalDecisions.ReportSource.ReportSourceF ...

  5. oracle sql语言模糊查询

    '^' 匹配输入字符串的开始位置,在方括号表达式中使用,此时它表示不接受该字符集合.'$' 匹配输入字符串的结尾位置.如果设置了 RegExp 对象的 Multiline 属性,则 $ 也匹配 '\n ...

  6. 理解Javascript执行过程

    Javascript是一种解释型的动态语言. 在程序中,有编译型语言和解释型语言.那么什么是编译型语言,什么是解释型语言呢? 编译型语言: 它首先将源代码编译成机器语言,再由机器运行机器码(二进制). ...

  7. luogu P1084疫情控制 二分

    链接 loj luogu太水不要去了. 思路 二分. 每个军队在一定的时间内越往上越好. 注意一个军队可以跨过1去帮别的. 把能到1脚下的点都存下来特判. 有一种情况是这个子树内只有一个军队,但这个军 ...

  8. Linux性能优化实战学习笔记：第四十六讲

    一.上节回顾 不知不觉,我们已经学完了整个专栏的四大基础模块,即 CPU.内存.文件系统和磁盘 I/O.以及网络的性能分析和优化.相信你已经掌握了这些基础模块的基本分析.定位思路,并熟悉了相关的优化方 ...

  9. IDEA 部署Tomcat教程（透彻理解操作）

    目录 首先我们看一下 IDEA 里的当前项目结构配置 设置 Web 资源目录和 Tomcat读取的 web.xml 配置文件 Tomcat 的 Run/Debug 配置 处理常见问题 Web资源找不到 ...

  10. java --后缀符号

    public class Sample { public static void main(String[] args) { , num2 = ; num1--; System.out.println ...