精华内容
下载资源
问答
  • Layui -- layer 图片弹出

    千次阅读 2019-07-19 18:26:00
    官网:http://layer.layui.comhttp://layer.layui.com/?alone CDN:https://www.bootcdn.cn/layer Api文档:http://layer.layui.com/api.html 新文档:https://www.layui.com/doc/modules/layer.html 使用eg: ...

    官网:http://layer.layui.com  http://layer.layui.com/?alone

    CDN:https://www.bootcdn.cn/layer

    Api文档:http://layer.layui.com/api.html  新文档:https://www.layui.com/doc/modules/layer.html

    使用eg:

     

    效果图:

     

     

    <div class="row" id='tk'>
        <ul class="col-sm-3" id="one_img">
            <li><img src="themes/default/images/g1.jpg" style="height: 400px;" class="fd"></li>
            <li><img src="themes/default/images/g2.jpg" class="fd"></li>
            <li><img src="themes/default/images/g3.jpg" class="fd"></li>
        </ul>
        <ul class="col-sm-3" id="two_img">
            <li><img src="themes/default/images/g4.jpg" class="fd"></li>
            <li><img src="themes/default/images/g5.jpg" class="fd"></li>
            <li><img src="themes/default/images/g6.jpg" style="height: 400px;" class="fd"></li>
        </ul>
        <ul class="col-sm-3" id="three_img">
            <li><img src="themes/default/images/g7.jpg" class="fd"></li>
            <li><img src="themes/default/images/g8.jpg" style="height: 400px;" class="fd"></li>
            <li><img src="themes/default/images/g9.jpg" class="fd"></li>
        </ul>
        <ul class="col-sm-3" id="four_img">
            <li><img src="themes/default/images/a1.png" style="height: 400px;" class="fd"></li>
            <li><img src="themes/default/images/cat1.png" class="fd"></li>
            <li><img src="themes/default/images/p5.png" class="fd"></li>
        </ul>
    </div>
    
    
     layer.ready(function(){
            // 使用相册
            layer.photos({
                photos: '#tk',
                shift:5,  // 动画类型 0 -6 选择
                area:['600px']   // 调节寬width height  ['600px','500px']
           closeBtn:1  // 是否显示关闭按钮 默认为0 不显示 1/2 2种风格 }); });

      可参考地址:http://localhost:63342/bootstarp/code/1915/index.html?_ijt=ob2vi9mb02esckmlnnc1g61qe0

    转载于:https://www.cnblogs.com/gjh99/p/11215096.html

    展开全文
  • 跪求,急用!求使用过的大神分享给我看下!
  • layer弹出图片

    万次阅读 2018-03-16 14:52:09
    layer弹出层非常之好用,用户体验非常好,有这样一个需求,当点击指定文字或是缩略图后,使用layer弹出图片,并且弹出层的宽和高根据图片大小自动变化。下面是实现这一功能的代码。 function showImg(url){  ...

    layer弹出层非常之好用,用户体验非常好,有这样一个需求,当点击指定文字或是缩略图后,使用layer弹出原图片,并且弹出层的宽和高根据图片大小自动变化。下面是实现这一功能的代码。

    function showImg(url){
        var img = "<img src='" + url + "' />";  
    	layer.open({  
    	    type: 1,  
    	    shade: false,  
    	    title: false, //不显示标题  
    	    area:['auto','auto'],  
    	    area: [img.width + 'px', img.height+'px'],  
    	    content: img, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响  
    	    cancel: function () {  
    	        //layer.msg('图片查看结束!', { time: 5000, icon: 6 });  
    	    }  
    	});  
    }

    如果想要规定弹出层的宽高,将属性area设置即可如弹出层宽800px,高600px,可写成area['800px','600px']

    展开全文
  • 2,layer弹出一张图片 3,layer地图弹出框 1,下载jquery,layer http://layer.layui.com/(网上一搜,上官网下载就行了) 2,引入项目 3,使用 注意: 1,&lt;script src="js/jquery...

    layer弹出层的使用:

    1,layer弹出提示框

    2,layer弹出一张图片

    3,layer地图弹出框

    1,下载jquery,layer   http://layer.layui.com/(网上一搜,上官网下载就行了)

    2,引入项目

    3,使用

    注意:

    1,<script src="js/jquery.min.js"></script>要在<script src="js/layer/layer.js"></script>前面引入。

     2,要用 

                  <script>                 //用这个
                       $(document).on('click', '#test', function() {
                               layer.msg('响应点击事件');
                          });
                     </script>

               

               $('#test').on('click', function()          //这个不起作用

               {

                      layer.msg('响应点击事件');

                });

              https://blog.csdn.net/xiao__jia__jia/article/details/79337312  为什么layer弹出层点击事件不起作用

    例1

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery.min.js"></script>
    		<script src="js/layer/layer.js"></script>	
    		<script>
    				$(document).on('click', '#test', function() {
    					layer.msg('响应点击事件');
    				});
    		</script>
    		<title></title>
    	</head>
    	<body>
    		<button id="test">小小提示层test</button>	
    	</body>
    </html>
    

    效果如下:点击小小提示层,屏幕正中间弹出“响应点击事件”

     

    例2

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery.min.js"></script>
    		<script src="js/layer/layer.js"></script>	
    		<script>
    				$(document).on('click', '#img', function() {
    					var img = '<img src="pay.png"/>'
    				    layer.open({
    				        type: 1,//Page层类型
    				        //area: ['500px', '300px'],
    				        title: '请扫码支付',
    				        shade: 0.6 ,//遮罩透明度
    				        maxmin: true ,//允许全屏最小化
    				        anim: 1 ,//0-6的动画形式,-1不开启
    				        content: img,
    				        btn: ['yes', 'cancel'],
                            yes: function(index, layero) {
                                window.location.href='back_login.html';
                            },
                            cancel: function() {
                                //右上角关闭回调
                            }
    					});
    				});
    			</script>
    		<title></title>
    	</head>
    	<body>
    		<a href="javascript:;" id="img">弹出图片</a>
    	</body>
    </html>
    
    

    效果如下:点击yes跳转到back——login页面,点击cancel会自动关闭弹窗

     

    例3:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery.min.js"></script>
    		<script src="js/layer/layer.js"></script>	
    		<script>
    			//地图弹出框
    			$(document).on('click', '#linkAdr', function() {
    				layer.open({
    	                type: 2,
    	                title: '',
    	                fix: false,
    	                maxmin: true,
    	                shadeClose: true,
    	                area: ['1100px', '600px'],
    	                content: 'http://map.baidu.com/',
    	            });
    			});        
    			</script>
    		<title></title>
    	</head>
    	<body>
    		<a href="javascript:;" id="linkAdr">查看地图</a>
    	</body>
    </html>
    

    效果如下:点击查看地图,弹出地图

     

    https://blog.csdn.net/qq_41815146/article/details/81141088  layer弹出图片的问题

    https://blog.csdn.net/wangweiscsdn/article/details/59116942  layer.js的弹出层点击确认跳转页面

     

    展开全文
  • layer 点击弹出图片

    2018-09-05 14:53:00
    今天做东西有一个功能:在列表点击图片弹出并放大显示,使用到了layer的页面层,下边是个小demo 1 success:function (e) { 2 3 var url = e.qrcode_url; //ajax获取的数据 4 5 var img = " <span ...

    今天做东西有一个功能:在列表点击图片弹出并放大显示,使用到了layer的页面层,下边是个小demo

     1 success:function (e) {
     2 
     3            var url  = e.qrcode_url; //ajax获取的数据
     4 
     5            var img = " <span style='text-align: center;display:block'><img src=' "+ url +" '> </span> "; //图片路径
     6          
     7             //layer
     8              layer.open({
     9                     type: 1,
    10                     skin: 'layui-layer-rim', //加上边框
    11                     area: ['400px', '400px'], //宽高
    12                     content: img
    13              });
    14 },

     

    转载于:https://www.cnblogs.com/qichao123/p/9592102.html

    展开全文
  • layer弹出图片的问题

    万次阅读 2018-07-21 10:14:54
    layer下载地址:http://layer.layui.com/ jQuery下载地址:http://www.jq22.com/jquery-info122 使用layer弹框的步骤: 1.引入javascript文件(jQuery文件+layer.js,先引入iQuery文件,注意引入路径) 2.参考官网...
  • 可拖动图片弹出层插件layer.js
  • layer弹出层显示图片

    2019-09-18 09:56:37
    引入layer //图片弹出层 function phot(e){ layer.photos({ photos: {"data": [{"src": e}]} ,anim:5}); } e是图片路径
  • layer iframe层弹出图片

    2018-10-12 14:29:00
    这个js是在一个layer iframe弹出层中,点击按钮弹出图片 转载于:https://www.cnblogs.com/gqymy/p/9777967.html
  • /*弹出图片*/ function previewImg(url) { var imgHtml = "<img src='" + url + "' style='width:100%; max-width:100%;'/>"; // 创建对象 var img = new Image(); img.src = url; layer.open({ type: 1...
  • layer弹出图片二维码

    千次阅读 2017-11-10 10:18:23
    layer.open({ type : 1, title : false, closeBtn : 0, shade: [0.001, '#393D49'], area : '200px', skin : 'layui-layer-nobg', //沒有背景色 shadeClose : true, content : html }); }
  • 可拖动图片弹出层插件layer.js是一款可自由拖动图片相册网页弹出窗口代码。
  • layer 点击图片缩略图弹出图片原图

    千次阅读 2019-08-15 17:39:11
    项目中有一个需求,点击图片的缩略图可以弹出弹层,查看图片原图;点击关闭按钮或点击遮罩层部分关闭图片 代码实现如下: 项目是单页面,有多处需要用到查看图片详情,于是在主页面放置一个图片弹层的容器 <...
  • 使用layer弹出层显示图片

    千次阅读 2017-08-31 10:31:31
    需求是在页面上点击“生成二维码”按钮,页面弹出显示二维码图片,由用户点击关闭。二维码可以在前台使用js生成也可以在后台生成,两种方式网上都有很多例子。我们团队对前端懂得都不是很多,使用js在前端生成时候...
  • * 图片弹出展示,默认原大小展示。图片大于浏览器时下窗口可视区域时,进行等比例缩小。 * src 图片路径。必须项 * imgHeight 图片显示高度,默认原大小展示。图片大于浏览器时下窗口可视区域时,进行等比例缩小。...
  • * 图片弹出展示,默认原大小展示。图片大于浏览器时下窗口可视区域时,进行等比例缩小。 * config.src 图片路径。必须项 * default_config.height 图片显示高度,默认原大小展示。图片大于浏览器时下窗口可视区域...
  • Layer弹出

    2019-06-09 15:00:09
    Layer弹出框 开发工具与关键技术:Visual Studio 2015 作者:徐晶旗 撰写时间:2019年6月8日 layer 是一款使用非常方便且功能强健的 jQuery 弹出层插件,对各类浏览器中的兼容性也很好。使用它可以创建出交互体验...
  • * 图片弹出展示,默认原大小展示。图片大于浏览器时下窗口可视区域时,进行等比例缩小。 * config.src 图片路径。必须项 * default_config.height 图片显示高度,默认原大小展示。图片大于浏览器时下窗口可视区域...
  • $('.am-g.trends').on('click','.ex-main-img', function () {layer.open({type: 1,title: false,closeBtn: 0,area: '500px',skin: 'layui-layer-nobg', //没有背景色shadeClose: true,content: $(this)});...
  • layer.js 802行 改前 if (n || p.on("click", t.img, function() { var e = i(this) , n = e.attr("layer-index"); r.photos(i....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,920
精华内容 19,968
关键字:

layer图片弹出