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

水深无声 2022-05-21 11:55 406阅读 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 条评论，406人围观）

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

相关阅读

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

效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pp

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

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

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

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

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

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

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

相关 html vr 图片插件,html基础总结4-实现点击图片弹出放大图片--不用插件

实现点击图片弹出放大图片--不用插件 ![%24%7BfhFeed.feedImageId%7D][24_7BfhFeed.feedImageId_7D] ![%24%7B

￡神魔★判官ぃ/ 2022年10月06日 10:50/ 0 赞/ 174 阅读

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

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

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

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

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

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

相关 vue点击图片放大预览图片支持旋转等

vue图片点击放大预览v-viewer库使用 > aiprose 个人随笔上线，网址 [aiprose.com][] [点击访问][Link 1] 提到图片放大预览，可

朱雀/ 2022年05月17日 06:10/ 0 赞/ 458 阅读

相关点击图片放大功能

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

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

相关图片放大效果

<style type="text/css"> {margin:0;padding:0;} /小图样式/ smallimg{

秒速五厘米/ 2021年10月08日 05:28/ 0 赞/ 478 阅读

相关图片居中放大

> 图片居中放大 1.外层一个固定宽高的div,背景图片，相对定位position：relative; 2.div里面包含一个img标签，初始宽高为0px；绝对定位

阳光穿透心脏的1/2处/ 2021年09月10日 08:12/ 0 赞/ 446 阅读