精华内容
下载资源
问答
  • 今天小编就为大家分享一篇Layui点击图片弹框预览的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 图片弹框

    2020-02-10 18:04:09
    用js实现图片弹框的特效。 效果展示 代码展示 html内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> ...

    用js实现图片弹框的特效。

    效果展示
    在这里插入图片描述

    代码展示

    html内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        </head>
    
    <body>
    
        <img id="myImg" src="img/c_7.jpg" alt="文本内容" width="300" height="200">
    
    <div class="modal" id="myModal">
        
        <span class="close" οnclick="document.getElementById('myModal').style.display='none'">&times;</span>
        
        <img class="modal-content" id="img">
            
            <div id="text"></div>
    </div>
    </body>
    
    </html>
    

    css内容

    #myImg{
    		        border-radius: 5px;
    		        cursor:pointer;
    		        transition:0.3s;
    		    }
    		    #myImg:hover{opacity:0.7;}
    		    
    		    .modal{
    		        display:none;   
    		        position: fixed;
    		        z-index: 1;
    		        padding-top:100px;
    		        left:0;
    		        top: 0;
    		        width:100%;
    		        height: 100%;
    		        overflow: auto;
    		        background-color: rgba(0,0,0,0.9);
    		    }
    		    /* 图片*/
    		    .modal-content{
    		        margin: auto;
    		        display: block;
    		        width:80%;
    		        max-width: 700px;
    		    }
    		    /* 文本内容*/
    		    #text{
    		        margin: auto;
    		        display: block;
    		        width:80%;
    		        max-width: 700px;
    		        text-align:center;
    		        color:#ccc;
    		        padding:10px 0;
    		        height: 150px;
    		    }
    			
    		    .modal-content, #text { 
    		    -webkit-animation-name: zoom;           
    		    -webkit-animation-duration: 0.6s;          
    		    animation-name: zoom;
    		    animation-duration: 0.6s;
    		}
    		 
    		@-webkit-keyframes zoom {                     
    		    from {-webkit-transform:scale(0)}  
    		    to {-webkit-transform:scale(1)}
    		}
    		 
    		@keyframes zoom {
    		    from {transform:scale(0)} 
    		    to {transform:scale(1)}
    		}
    		 
    		/* 关闭按钮 */
    		.close {
    		    position: absolute;
    		    top: 15px;
    		    right: 35px;
    		    color: #f1f1f1;
    		    font-size: 40px;
    		    font-weight: bold;
    		    transition: 0.3s;
    		}
    		 
    		.close:hover,.close:focus {
    		    color: #bbb;
    		    text-decoration: none;
    		    cursor: pointer;
    		}
    		 
    		
    		@media only screen and (max-width: 700px){
    		    .modal-content {
    		        width: 100%;
    		    }
    		}
    

    js内容

    var modal = document.getElementById('myModal');
    	 
    	
    	var img = document.getElementById('myImg');
    	var modalImg = document.getElementById("img");
    	var captionText = document.getElementById("text");
    	img.onclick = function(){
    	    modal.style.display = "block";
    	    modalImg.src = this.src;
    	    captionText.innerHTML = this.alt;
    	}
    	 
    	
    	var span = document.getElementsByClassName("close")[0];
    	 
    	
    	span.onclick = function() { 
    	  modal.style.display = "none";
    	}
    

    了解更多关注我哟!!!

    展开全文
  • Layui点击图片弹框预览

    千次阅读 2020-06-01 14:48:17
    function previewImg(obj)... // 原图片大小 //var width = img.width; //原图片大小 var imgHtml = “”; //弹出层 layer.open({ type: 1, shade: 0.8, offset: ‘auto’, area: [500 + ‘px’,550+‘px’], // area..
     <img src="123.png"  width="20px" height="20px" class="layui-upload-img" onclick="previewImg(this)">
    
    function previewImg(obj) {
            var img = new Image();  
            img.src = obj.src;
            //var height = img.height + 50; // 原图片大小
            //var width = img.width; //原图片大小
            var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";  
            //弹出层
            layer.open({  
                type: 1,  
                shade: 0.8,
                offset: 'auto',
                area: [500 + 'px',550+'px'],  // area: [width + 'px',height+'px']  //原图显示
                shadeClose:true,
                scrollbar: false,
                title: "图片预览", //不显示标题  
                content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响  
                cancel: function () {  
                    //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });  
                }  
            }); 
        }
    ————————————————
    版权声明:本文为CSDN博主「amenghui」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/amenghui/article/details/86358494
    
    
     //另外打开一个页面显示图片
      function previewImg(obj) {
            window.open(obj.src);
        }
    
    
    
    展开全文
  • uniapp图片弹框效果

    千次阅读 2020-01-19 16:47:25
    需求:点击提交按钮,提交成功后会弹出一个弹框,提示成功,点击右上角的叉号或者我知道了,隐藏弹框效果。 <template> <view> <form> <view class="uni-btn-v uni-common-mt">...

    需求:点击提交按钮,提交成功后会弹出一个弹框,提示成功,点击右上角的叉号或者我知道了,隐藏弹框效果。

    5640239-d0c5ed0fbf6bbc93.png
    <template>
        <view>  
        
            <form>
                <view class="uni-btn-v uni-common-mt">
                    <button class="btn-submit" formType="submit" type="primary"@tap="showModal" data-target="Image">提交打卡</button>
                </view>
            </form>
    
            <view class="cu-modal" :class="modalName=='Image'?'show':''">
                <view class="cu-dialog">
                    <view class="bg-img" style="background-image: url('../../static/img/alarm.png');height:250px;">
                        <view class="cu-bar justify-end text-white">
                            <view class="action" @tap="hideModal">
                                <text class="cuIcon-close "></text>
                            </view>
                        </view>
                    </view>
                    <view class="cu-bar bg-white">
                        <view class="action margin-0 flex-sub  solid-left" @tap="hideModal">我知道了</view>
                    </view>
                </view>
            </view>
    
        </view>
    </template>
    <script>
        export default {
            data() {
                return {
                    modalName: null,
                };
            },
            methods: {
                showModal(e) {
                    this.modalName = e.currentTarget.dataset.target
                },
                hideModal(e) {
                    this.modalName = null
                },
            }
        }
    </script>
    
    <style>
        .cu-form-group .title {
            min-width: calc(4em + 15px);
        }
        .btn-submit {
            background-color: #1C2A86;
            margin: 100upx 20upx;
            color: #fff;
        }
    </style>
    
    
    展开全文
  • 这是一个点击图片全屏放大查看,再次点击全屏图片退出全屏查看。
  • Tips:虽然代码有点长,但是你只需要改掉一个图片链接再下载个jQuery.js就可以得到要展示的效果。 话不多说,先上效果图 点击图片之后会将图片放大1.5倍放大,背景遮罩层根据情况进行设置 今晚找了很多博客都讲不...

    Tips:虽然代码有点长,但是你只需要改掉一个图片链接再下载个jQuery.js就可以得到要展示的效果。

    话不多说,先上效果图
    点击图片之后会将图片放大1.5倍放大,背景遮罩层根据情况进行设置
    在这里插入图片描述
    今晚找了很多博客都讲不清楚,所以自己就动脑子想想怎么做吧。。。
    然后,根据之前设置弹出框的思想,搞出这个图片的放大效果,也挺有成就感,但是代码还是太Low,需要系统学一下呀。。。

    思路:
    1.设置遮罩层div,遮罩层根据body和clientHeight取大值进行设置;
    2.设置弹出框div,添加img标签;
    3.获取图片的链接、高度、宽度等性质;
    4.向弹出框中添加src链接并设置图片属性,显示完毕。

    上代码,这里加入了jQuery:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <script type="text/javascript" src="jquery-3.4.1.js"></script>
    </head>
    <style type="text/css">
        ul li{
            list-style: none;
        }
        #container{
            overflow: hidden;
        }
        #container img{
            transition: all 0.8s;
        }
        #container img:hover{
            transform: scale(1.03);
        }
        #layer{
            display: none;
            background-color: #B3B3B3;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 10;
            -moz-opacity: 0.8;
            opacity:.80;
        }
        #popBox{
            display: none;
            z-index: 11;
            position:fixed;
            top:0;
            right:0;
            left:0;
            bottom:0;
            margin:auto;
        }
    </style>
    <script type="text/javascript">
        // $(function () {
        //     $('.bigImg').click(function () {
        //
        //     })
        // })
        function BigBig(src, width, height) {
            //获取body高度和宽度,当然是包括下拉框在内的长度
            var bkgWidth = document.body.clientWidth +'px';
            var bkgHeight = document.body.clientHeight + 'px';
            //获取可见高度
            var clientHeight = document.documentElement.clientHeight;
    
            if(clientHeight > document.body.clientHeight){
                bkgHeight = clientHeight + 'px';
            }else{
                bkgHeight = document.body.clientHeight + 'px';
            }
    
            var layer = document.getElementById('layer');
    
            $('#layer').css({"width":bkgWidth, "height":bkgHeight});
    
            var popBox = document.getElementById('popBox');
            var BigImage = document.getElementById('BigImage');
            layer.style.display = 'block';
            popBox.style.display = 'block';
            // var src = $('#Image1').attr("src")
            console.log(src)
    
            // var realwidth = $('#Image1').width();
            // var realheight = $('#Image1').height();
            var realwidth = width;
            var realheight = height;
            // console.log(realwidth)
            // console.log(realheight)
            // console.log(width)
            // console.log(height)
    
            var bigWidth = realwidth*1.5;
            var bigHeight = realheight*1.5;
    
            $('#BigImage').css({"width":bigWidth, "height":bigHeight})
            $('#BigImage').attr("src", src)
    
            var leftwidth = (document.body.clientWidth - realwidth*1.5)/2;
            var topheight = (clientHeight - realheight*1.5)/2
            BigImage.style.marginTop = topheight - 10 + 'px';
            BigImage.style.marginLeft = leftwidth + 'px';
    
            // console.log(bigWidth)
            // console.log(bigHeight)
    
    
        }
        function Close(){
            var layer = document.getElementById('layer');
            var popBox = document.getElementById('popBox');
    
            layer.style.display = 'none';
            popBox.style.display = 'none';
        }
    </script>
    <body>
    <div id="layer">
    </div>
    <div id="popBox">
        <div>
            <a onclick="Close();" style="cursor: pointer;color: #2D2C3B;">关闭</a>
        </div>
        <img id="BigImage" src="" style="">
    </div>
    <div id="container">
        <img onclick="BigBig(this.src, this.width, this.height);" style="margin-left: 100px;width: 40%;" src="Image/1001181.jpg">
    </div>
    </body>
    </html>
    

    还是有点成就感的,,,,
    多多点赞呀!!!!

    展开全文
  • weui 图片弹框

    2017-01-05 13:55:00
    添加图片与弹出效果对比:   HTML: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" ...
  • /* 优先创建图片,如果图片没有加载成功,回调自己 */     var   img = document.createElement( 'img'   );  img.setAttribute(   'src' , src);   //显示图片的大小     var   imgwd =   "300...
  • 保存图片弹框

    2018-03-16 20:47:48
    string sd = Request.Url.ToString(); string url = sd.Remove(sd.IndexOf("/web/") + 5) + ImageUrl.Remove(0, 2); FileStream fs = new FileStream(Server.MapPath(ImageUrl), FileMode.Open);...
  • 自定义view方式实现仿支付宝支付弹框效果,dialog是参照系统dialog方式实现的万能dialog
  • 弹框上传图片

    2019-07-28 18:07:48
    //弹框出来的图片 根据点击的正反面弹出正确图片示例 < view class = ' upload ' bindtap = ' chooseImage ' > 确定 view > < view class = ' w60 ' > < image bindtap = ' hid ' src = ' ...
  • 基于layer插件的小实例:弹框图片

    千次阅读 2018-07-23 10:34:21
    layer插件是前端中的一个功能非常强大的插件,它的弹框功能非常实用,是前端设计与学习必不可少的一环。  准备工作:下载layer (官网:http://layer.layui.com/) 一:图片弹窗(先上正题再闲扯)  1.创建...
  • 本文要使用Android WebView实现长按保存图片及长按识别二维码功能,当用户在浏览网页的时候,长按某一区域,识别如果是图片,则弹出弹框,出现保存图片的功能
  • 弹出的图片显示在弹框下面怎么办问题来源问题分析解决方法 问题来源 在写前端vue项目时,在用到ele的 el-image 这个组件时,有时会出现图片显示在弹框即dialog下面,后面发现是因为el-image组件,默认的z-index是...
  • js特效-jQuery H5弹出图片放大缩小旋转插件
  • vue-tinymce 封装了el-upload 控件,支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见:https://xingyun.blog.csdn.net/article/details/102492921
  • 弹出框显示图片轮播

    2014-02-19 16:29:15
    弹出框显示图片轮播,当你想要图片在弹出框,显示,并且可以切换,这个特效无疑可以用。
  • 修改用户头像,仿ios底部弹框(从手机相册选择,拍照),兼容Android7.0,android8.0文件等特殊权限
  • 用js实现的简单弹出层加上图片轮播
  • 一个基于vue2.0的弹窗组件(PC) 不存在外部字体以及图片等文件,动画使用css3实现,空间很小
  • 微信小程序弹框实现

    千次阅读 2019-10-16 17:40:40
    小程序弹框实现 1、页面结构 <!-- 遮罩层 --> <view> <view class="mask" bindtap="close" wx:if="{{ showModal }}"></view> <view class="modal" wx:if="{{ showModal }}"> ...
  • 上传图片自定义宽高

    2013-11-29 16:52:33
    asp.net上传图片自定义宽高想要多大就有多大
  • tinymce爬坑-弹框中使用tinymce

    千次阅读 2020-02-11 11:09:14
    富文本无法编辑: 可能造成的原因: tinymce在modal前创建了,所以导致这个问题,解决方案就是用 v-if model弹出后是tinymce显示 <el-dialog :visible.sync="dialogFormVisible" > <...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,016
精华内容 5,606
关键字:

图片弹框