jQuery实现图片的放大以及点击图片，放大图片出现在弹出层。

水深无声 2022-05-21 11:55 491阅读 0赞

又学习了一个小demo，并运用到了后台的管理系统中。  
直接上代码吧

<div class="img-list-box">
        <div class="img-select">
            <img id="img" class="min" src="./img/banner.jpg" alt="">
        </div>
        <div class="img-select">
            <img class="min" src="./img/bg_repeat.jpg" alt="">
        </div>
    </div>
    
    <div class="dialog-bg" id="dialog-bg">
    <div class="img-box" id="img-box">
        <img src="">
    </div>

.max{ 
       width: 300px;
    }
    .min{ 
        width: 100px;
    }
    
    .img-select img{ 
    	width:200px;
    	height:100px;
    }
    
    .dialog-bg{ 
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,0.4);
    }
    
    
    .dialog-bg .img-box{ 
        width: 400px;
        height: 250px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -125px;
    }
    
    .dialog-bg .img-box img{ 
        width: 100%;
        height: 100%;
    }

下面这段代码是控制图片在点击的时候实现 **大小切换**

<script src="http://jquery.cuishifeng.cn/js/jquery-3.2.1_b5dbe7b.js"></script>
    <script type="text/javascript"> $("#img").click(function () { $(this).toggleClass("max"); $(this).toggleClass("min"); });//这里我们运用的是jQuery提供的toggleClass()在两个类名之间切换。 </script>

下面这段代码是实现，**小图点击出现弹出层，图片放大在弹出层中间**。

<script src="http://jquery.cuishifeng.cn/js/jquery-3.2.1_b5dbe7b.js"></script>
    <script type="text/javascript"> //无论点击哪一个img弹出层都会展示相应的图片。 $(".img-select").find("img").on("click",function () { $(this).each(function () { var $this = $(this); var $img = $this.attr("src");//获取当前点击img的src的值 $("#img-box").find("img").attr("src",$img);//将获取的当前点击img的src赋值到弹出层的图片的src $("#dialog-bg").show();//弹出层显示 }); }); //弹出层隐藏 $("#dialog-bg").on("click",function () { $(this).hide();// }); </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，491人围观）

还没有评论，来说两句吧...

相关阅读

相关 Js或者jQuery实现点击图片出现蒙层并将图片放大在蒙层上------Sestid

们先看一个比较简单的（用jQuery实现）示例图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a...

小鱼儿/ 2024年04月18日 20:44/ 0 赞/ 53 阅读

相关 jquery 实现图片放大

文章目录一、html、Jquery代码如下二、效果 2.1、初始化加载的页面 2.3、鼠标放到图片

超、凢脫俗/ 2023年07月16日 03:40/ 0 赞/ 38 阅读

相关 jquery图片放大

jquery 图片放大 [点击查看图片放大效果][Link 1] [http://api.buruyouni.com/static/demo/%E6%94%BE%E5%A

爱被打了一巴掌/ 2023年07月13日 10:53/ 0 赞/ 29 阅读

相关 vue 实现点击图片放大

作者QQ：1095737364 QQ群：123300273 欢迎加入！ 1.建立子组件,来实现图片方法功能: BigImg.vue <templa

分手后的思念是犯贱/ 2023年06月03日 04:58/ 0 赞/ 12 阅读

相关 html点击图片弹出放大（内附下载demo）

效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pp

刺骨的言语ヽ痛彻心扉/ 2022年12月28日 04:17/ 0 赞/ 249 阅读

相关 vue实现点击图片放大显示功能

[https://blog.csdn.net/qq348843576/article/details/103261567][https_blog.csdn.net_qq3488

ゝ一纸荒年。/ 2022年11月17日 13:53/ 0 赞/ 345 阅读

相关 html按钮在屏幕中间弹出一张图片,js实现点击图片在屏幕中间弹出放大效果.pdf...

js实实现现点点击击图图片片在在屏屏幕幕中中间间弹弹出出放放大大效效果果 j s实现点击图片在屏幕中间弹出放大效果效果图点击图片后关键代码 html 1 2

布满荆棘的人生/ 2022年10月06日 11:45/ 0 赞/ 209 阅读

相关 jQuery点击图片全屏放大插件

[下载地址][Link 1]这是个灯箱LightBox插件，点击图片弹出覆盖全屏层图片放大显示效果。基于jquery.magnific-popup.js这个插件实现的弹出放大效

港控/mmm°/ 2022年09月11日 06:17/ 0 赞/ 333 阅读

相关 jQuery实现图片的放大以及点击图片，放大图片出现在弹出层。

又学习了一个小demo，并运用到了后台的管理系统中。直接上代码吧 <div class="img-list-box"> <div class="

水深无声/ 2022年05月21日 11:55/ 0 赞/ 492 阅读

相关点击图片放大功能

点击图片放大功能注意：引入顺序必须先引入jquery.js再引入zoomify.js zoomify图片放大预览插件的github地址为： [https://

怼烎@/ 2022年04月17日 02:45/ 0 赞/ 438 阅读