效果图：
原点
放大安装图
其实很简单就是先把图片点击事件然后放大，在此点击还原就这么简单，我们看一下怎么做
opacity:1;如果是1是不透明 display: block;表示显示在网页上，并且此元素将显示为块级元素。
opacity:1;如果是0是透明 display: none;表示不显示在网页上。
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" >'
+"您的浏览器不支持视频标记,请尽快联系程序员"
+ '</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;");
});
//安装大图关闭
$('#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">技术指导：</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">安装指导</h2>
</div>
<!-- <div class="audio_zd">
<p style="size: 20px;">重要提示:<font style="color: red;">务必提供天猫核销码。</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>确认书<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">确认提交</a>
</div>
</div>
</article>
</section>
网友评论