點擊彈出放大圖片層 · 從零開始的避坑指南

[TOC] >apicloud中可以引用jq文件，經試驗layer彈窗插件不可用 > 可使用jeBox彈窗，（jeBox不包含任何第三方庫，原生js開發） **注**：jq文件版本不能太高 # 點擊縮略圖顯示大圖 ## 代碼 ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <title>機構信息</title> <link rel="stylesheet" type="text/css" href="../css/aui.css"/> <style> body { height: auto; } .aui-card { margin-top: 15px; } .aui-badge { background-color: transparent; color: #666; font-size: 14px; } .aui-input-row .check { padding: 8px; color: #f1c40f; } .avatar { margin-top: 13px; } .content { position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; padding: 3px 6px; font-size: 16px; line-height: 1; color: #333; border-radius: 100px; } .check { margin-top: 8px; } .maxImg{ position: fixed; top: 25%; left:0%; z-index: 1002; } .maxImg #Images{ width: 100%; } #goodcover { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 133%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: 0.50; filter: alpha(opacity=80); } </style> </head> <body> <div class="aui-content aui-card aui-noborder"> <ul class="aui-user-view my_info" id="organInfo"> </ul> </div> <div id="goodcover" onclick="clos();"></div> <div class="maxImg"> <img src="" id="Images"> </div> </body> <script type="text/javascript" src="../script/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="../script/api.js"></script> <script type="text/javascript" src="../script/doT.min.js"></script> <script type="text/javascript" src="../script/jebox.min.js"></script>  <script type="text/x-dot-template" id="OrganInfoT"> <li class="aui-list-view-cell" > <a class="">機構名稱 <span class="content" id="organ_name">{{=it.organ_name}}</span> </a> </li> <li class="aui-list-view-cell" > <a class="">所屬分類 <span class="content" id='organ_cate'>{{=it.cate_name}}</span></a> </li> <li class="aui-list-view-cell" > <a class=""> 機構電話 <span class="content" id="birthday" >{{=it.tel}}</span> </a> </li> <li class="aui-list-view-cell" > <a class="">聯系人 <span class="content" id="realname">{{=it.realname}}</span></a> </li> <li class="aui-list-view-cell" > <a class="">加入時間 <span class="content" id="telphone">{{=it.create_time}}</span></a> </li> <li class="aui-list-view-cell" > <a class="">所在區域 <span class="content" id='region'>{{=it.province_name}}-{{=it.city_name}}-{{=it.district_name}}</span> </a> </li> <li class="aui-list-view-cell" > <a class=""> 詳細地址 <span class="content" id="address">{{=it.addr}}</span> </a> </li> <li class="aui-user-view-cell aui-img" onclick="max('quali');"> <img class="aui-img-object aui-pull-right" id='quali' src="{{=it.qualification}}" style=" margin-right: 27px"> <div class="aui-img-body "> <h2 class='avatar'>營業執照</h2> </div> </li> <li class="aui-user-view-cell aui-img" > <img class="aui-img-object aui-pull-right" id='qualification1' src="http://www.sytest.com.cn/data/upload/{{=it.idphoto1}}" style=" margin-right: 27px" onclick="max('qualification1');"> <img class="aui-img-object aui-pull-right" id='qualification2' src="http://www.sytest.com.cn/data/upload/{{=it.idphoto2}}" style=" margin-right: 27px" onclick="max('qualification2');"> <div class="aui-img-body "> <h2 class='avatar'>證件照</h2> </div> </li> <li class="aui-user-view-cell aui-img" onclick="max('avatarImg');"> <img class="aui-img-object aui-pull-right" id='avatarImg' src="{{=it.logo}}" style=" margin-right: 27px"> <div class="aui-img-body "> <h2 class='avatar'>機構頭像</h2> </div> </li> </script> <script type="text/javascript"> function max(url){ var ourl = document.getElementById(url).src; document.getElementById("Images").src = ourl; $('#maxImg').center(); $('#goodcover').show(); $('#Images').fadeIn(); } function clos(){ $('#Images').hide(); $('#goodcover').hide(); } /*function max(price){ jeBox.open({ padding:"0", area:["50%","80%"], content: document.getElementById(price), masklock : true }) }*/ apiready = function(){ api.parseTapmode(); var organ_id = api.pageParam.organ_id; fnLoadData(organ_id); jQuery.fn.center = function(loaded) { var obj = this; body_width = parseInt($(window).width()); body_height = parseInt($(window).height()); block_width = parseInt(obj.width()); block_height = parseInt(obj.height()); left_position = parseInt((body_width / 2) - (block_width / 2) + $(window).scrollLeft()); if (body_width < block_width) { left_position = 0 + $(window).scrollLeft(); }; top_position = parseInt((body_height / 2) - (block_height / 2) + $(window).scrollTop()); if (body_height < block_height) { top_position = 0 + $(window).scrollTop(); }; if (!loaded) { obj.css({ 'position': 'absolute' }); obj.css({ 'top': ($(window).height() - $('#maxImg').height()) * 0.5, 'left': left_position }); $(window).bind('resize', function() { obj.center(!loaded); }); $(window).bind('scroll', function() { obj.center(!loaded); }); } else { obj.stop(); obj.css({ 'position': 'absolute' }); obj.animate({ 'top': top_position }, 200, 'linear'); } } } // 顯示數據 function fnShowData(data_){ var apendText = $api.byId('OrganInfoT').text; var fnapendText = doT.template(apendText); var html = fnapendText(data_); var list = $api.dom('#organInfo'); api.parseTapmode(); $api.append(list, html); api.hideProgress(); } // 加載數據 function fnLoadData(organ_id){ api.ajax({ url: 'http://www.sytest.com.cn/index.php?g=Osapp&m=OrganManage&a=organ_info', method: 'post', data: { values: { organ_id: organ_id } } },function(ret, err){ if (ret) { // alert( JSON.stringify( ret ) ); fnShowData(ret); } else { alert( JSON.stringify( err ) ); } }); } </script> </html> ~~~ ## 效果 ![](https://box.kancloud.cn/c44fc6ad5c5dec83d6947d8589a25092_561x999.png)