效果圖：
原點
放大安裝圖
其實很簡單就是先把圖片點擊事件然后放大眨八，在此點擊還原就這么簡單蜻韭，我們看一下怎么做
opacity:1;如果是1是不透明 display: block;表示顯示在網(wǎng)頁上，并且此元素將顯示為塊級元素楚午。
opacity:1;如果是0是透明 display: none;表示不顯示在網(wǎng)頁上昭齐。
function addOrderDetailNew(data) {
var order=data.order.columns;
var orderUrl=data.orderUrl.columns;
var video='';
if(orderUrl!=null){
if(orderUrl.image_url!=null){
video+= '<li class="clearfix">'
+'<span class="img">安裝圖片：</span>'
+'<img class="pay_amount_img" style="width: 50%" src="'+orderUrl.image_url+'" />'
+ '</li>';
}
if(orderUrl.dir_url!=null){
video+= '<li class="clearfix">'
+'<span class="imgs">安裝視頻：</span>'
+'<video id="tutorialListsValue" src="'+orderUrl.dir_url+'"style="width: 50%;object-fit:fill;" controls controlsList="nodownload" >'
+"您的瀏覽器不支持視頻標(biāo)記,請盡快聯(lián)系程序員"
+ '</video>'
+ '</li>';
}
$('#addFlag_box').append(video);
}
//安裝大圖查看
$('.pay_amount_img').live('tap touchstart',function () {
var imgUrl = $(this).attr('imgUrl');
var html = '<span class="weui-gallery__img" id="galleryImg" style="background-image:url('+ orderUrl.image_url +')"></span>';
$("#order_gallery").html(html);
$("#order_gallery").attr("style","opacity: 1; display: block;");
});
//安裝大圖關(guān)閉
$('#order_gallery').live('tap touchstart',function () {
$("#order_gallery").attr("style","opacity: 0; display: none;");
});
}
image.png
<section id="order_install_section">
<div class="weui-gallery" id="order_gallery" style="opacity: 0; display: none;"></div>
<header>
<nav class="left">
<a href="" data-icon="previous" data-target="back">Back</a>
</nav>
<h1 class="title">頁面</h1>
</header>
<article id="order_install_art" data-scroll="true" class="active">
<div class="inner_article_div">
<input type="hidden" value="" id="showCodeVal" />
<input type="hidden" value="" id="install_id" />
<input type="hidden" value="" id="hiddenHxCode">
<div class="input_all">
<div class="list_order_manager_title clearfix bg_none">
<h2 class="fl">訂單信息</h2>
<span class="detail_sign fl" id="detail_type">快易修</span>
</div>
<div class="list_order_manager_con" >
<ul id="addFlag_box">
<li class="clearfix">
<span class="fl">訂單編號：</span>
<em class="fl" id="orderSn"></em>
</li>
<li class="clearfix">
<span class="fl">安裝價格：</span>
<em class="fl" id="installPrice"></em>
</li>
<li class="clearfix">
<span class="fl">技術(shù)指導(dǎo)：</span>
<em class="fl" id="jsname" ></em>
</li>
<li class="clearfix">
<span class="fl">車主號碼：</span>
<em class="fl" ><font id="mobile"></font><a id="car_tel" href="#"><img style="width: 13px;height: 13px" src="img/img_call_phone.png"/></a></em>
</li>
<li class="clearfix">
<span class="fl" id>下單日期：</span>
<em class="fl" id="createTime"></em>
</li>
<li class="clearfix">
<span class="fl">訂單信息：</span>
<em class="fl" id="orderInfo"></em>
</li>
<li class="clearfix">
<span class="fl">重要信息：</span>
<em class="fl" id="importantInfo" style="color:red"></em>
</li>
</ul>
<i class="weianzhuang" id="state-icon"></i>
<div class="audio_zd" id="tutorial">
<img src="img/img-audio.jpg" width="100%" height="100px"/>
<h2 class="title">安裝指導(dǎo)</h2>
</div>
<!-- <div class="audio_zd">
<p style="size: 20px;">重要提示:<font style="color: red;">務(wù)必提供天貓核銷碼。</font></p>
</div> -->
</div>
<div id="showCode">
<!-- <div id="hxm1" class="" style="margin-top: 20px;">
<div class="hxmBox"><span >核銷碼：</span><input type="text" ></div>
</div>
<div id="hxm2" class="" style="margin-top: 20px;">
<div class="hxmBox"><span>核銷碼：</span><input type="text" ></div>
</div> -->
</div>
<div class="weui-cell inputbg">
<div class="weui-cell__hd"><label for="" class="weui-label font14" id="installInfo-label">安裝說明</label></div>
<div class="weui-cell__bd">
<textarea class="weui-textarea" rows="3" id="installInfo" placeholder=""></textarea>
</div>
</div>
</div>
<div style = "margin-left:15px">安裝圖片:</div>
<div class="weui-uploader__bd img_margin clearfix" id="installImagesDiv">
<div class="weui-weui-uploader__files fl clearfix">
<div class="weui-uploader__input-box fl">
<input id="uploaderQRSInput" class="weui-uploader__input order-install-upload_img" type="file" accept="image/*">
<p>確認(rèn)書<span onclick="goQuestion(3);" class="icon question"></span></p>
</div>
<div class="weui-uploader__input-box fl">
<input id="uploaderSGTInput" class="weui-uploader__input order-install-upload_img" type="file" accept="image/*">
<p>施工圖</p>
</div>
<div class="weui-uploader__input-box fl">
<input id="uploaderFirstInput" class="weui-uploader__input order-install-upload_img" type="file" accept="image/*">
<p>好評圖</p>
</div>
<div class="weui-uploader__input-box fl">
<input id="uploaderSecondInput" class="weui-uploader__input order-install-upload_img" type="file" accept="image/*">
</div>
<div class="weui-uploader__input-box fl">
<input id="uploaderThirdInput" class="weui-uploader__input order-install-upload_img" type="file" accept="image/*">
</div>
</div>
</div>
<!--
<div style = "margin-left:15px">好評圖片:</div>
<div class="weui-uploader__bd img_margin clearfix" id="goodImagesDiv">
<div class="weui-weui-uploader__files fl clearfix">
<div class="weui-uploader__input-box fl">
<input id="goodImagesOne" class="weui-uploader__input order-install-upload_img" type="file" accept="image/*">
<p>第一張<span class="icon question"></span></p>
</div>
<div class="weui-uploader__input-box fl">
<input id="goodImagesTwo" class="weui-uploader__input order-install-upload_img" type="file" accept="image/*">
<p>第二張</p>
</div>
<div class="weui-uploader__input-box fl">
<input id="goodImagesThree" class="weui-uploader__input order-install-upload_img" type="file" accept="image/*">
<p>第三張</p>
</div>
</div>
</div>
-->
<div class="btn">
<a href="javascript:;" class="weui-btn weui-btn_primary" id="installSave">確認(rèn)提交</a>
</div>
</div>
</article>
</section>
