js 图片点击查看大图

最新推荐文章于 2024-04-17 12:21:19 发布

星星~笑笑

最新推荐文章于 2024-04-17 12:21:19 发布

阅读量2.9k

点赞数

分类专栏： js 文章标签： js 图片查看大图

本文链接：https://blog.csdn.net/u014724048/article/details/78542310

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

js 点击图片查看大图

备注：其中一些引用文件没法上传，如果有需要的私信即可；

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content="telephone=no" name="format-detection" />
<title>人工充值</title>
<link href='agent.css' rel="stylesheet" type="text/css" >

<link type="text/css" rel="stylesheet" href="layer.css"/>
<script src="date/datepicker.js"></script>
<link rel="stylesheet" href="date/datepicker.css" />
<style>
body{
width: 97%;
margin: auto;
}
.weixin_ceshi {
float: left;
text-align: center;
width: 50%;
position: relative;
}.weixin_ceshi2 {
float: right;
text-align: center;
width: 50%;
/* height: 200px; */
/* margin: 20px auto 30px; */
position: relative;
}
.contentshow{
float: left;
width: 100%;
text-align: left;
margin-left: 15px;
}
.contentdiv{
float: left;
width: 100%;
}

img {
border: none;
vertical-align: middle;
width: 90%;text-align: center;
}
input, textarea{
width: 70%;
border: 1px solid #898a8a;
height: 20px;
line-height: 20px;
background: #fff;
vertical-align: middle;
border-radius: 10px;
}
.money{
color: #acacac;
}

.line {
height: 10px;
background: #f7f7f7;
clear: both;
}
.zftitle{
font-size:18px;
}
.home {
margin: auto;

}
.topdiv{
width:90%;margin: 20px auto 20px;overflow: hidden;
}

</style>
</head>
<body>

<div class="home">
<div class="topdiv">

<div class="weixin_ceshi">
<p class="zftitle">微信支付</p>
<img src="wxpay.jpg" onClick="$(this).ImgZoomIn('wxpay.jpg');">
</div>
<div class="weixin_ceshi2">
<p class="zftitle">支付宝</p>
<img src="zfbpay.jpg" onClick="$(this).ImgZoomIn('zfbpay.jpg');">
</div>
</div>
<div class="line"></div>
<div class="mycode">
<div>
<a style="color:#ffbd00">温馨提示：点击二维码放大后点击截屏</a>
</div>
<div class="contentdiv">
<ul >
<li class="contentshow">
<span class="contentspan">充值金额：</span><span class="money" id="chargemoney">{$money}</span>
</li>
<li class="contentshow">
<span class="contentspan">转账单号：</span><input id="chargenum" onkeyup ="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" ></input>
</li>
<li class="contentshow">

<span class="contentspan">转账时间：</span><input id="chargetime" type="button" name="start_time" autocomplete="off">


</li>
<li class="contentshow">
<input id="paytype" type="hidden" value="0"></input>
<span class="contentspan">付款方式：</span>
<img id="wxpay" src="wx1.png" style="height:30px;width: 30%;" οnclick="checkpay(1)">
<img id="zfbpay" src="zfb1.png" style="height:30px;width: 30%;" οnclick="checkpay(2)">
</li>
</ul>
</div>
<br>
<div class="copy" >
<span οnclick="window.location.href='/index.php?g=Appapi&m=Appshare&a=sharevideo'">点击查看充值教程</span>
</div>
<div class="copyurl" id="submitbtn">
提交订单
</div>

</div>
</div>

<script src="jquery.js"></script>
<script src="layer.js"></script>

<script>
if(document.addEventListener){
document.addEventListener('DOMContentLoaded',domCallback,false);
}else{
window.onload = domCallback;
}
function domCallback () {
datepicker({
triEle:'chargetime',
format:'yyyy-mm-dd hh:ii:ss',
showTime:true
});
}
</script>
<script>
//弹出大图
$.fn.ImgZoomIn = function (url) {
var bgstr = '<div id="ImgZoomInBG" style=" background:#000000; filter:Alpha(Opacity=70); opacity:0.7; position:fixed; left:0; top:0; z-index:10000; width:100%; height:100%; display:none;"><iframe src="about:blank" frameborder="5px" scrolling="yes" style="width:100%; height:100%;"></iframe></div>';
//alert($(this).attr('src'));
var imgstr = '<img id="ImgZoomInImage" src="' + url+'" οnclick=$(\'#ImgZoomInImage\').hide();$(\'#ImgZoomInBG\').hide(); style="cursor:pointer; display:none; position:absolute; z-index:10001;" />';
if ($('#ImgZoomInBG').length < 1) {
$('body').append(bgstr);
}
if ($('#ImgZoomInImage').length < 1) {
$('body').append(imgstr);
}
else {
$('#ImgZoomInImage').attr('src', $(this).attr('src'));
}
$('#ImgZoomInImage').css('left', $(window).scrollLeft() + ($(window).width() - $('#ImgZoomInImage').width()) / 2);
$('#ImgZoomInImage').css('top', $(window).scrollTop() + ($(window).height() - $('#ImgZoomInImage').height()) / 2);
$('#ImgZoomInBG').show();
$('#ImgZoomInImage').show();
};

function checkpay(type){
if(type==1){
$('#wxpay').attr('src','wx.png');
$('#zfbpay').attr('src','zfb1.png');
}else if(type==2){
$('#wxpay').attr('src','wx1.png');
$('#zfbpay').attr('src','zfb.png');
}
$("#paytype").val(type); //设置
}
$("#submitbtn").on("click",function(){
var valtype = $("#paytype").val(); //获取付款方式
if(valtype==0){
layer.msg("请选择付款方式");
return !1;
}
//数据库提交支付订单

var chargetime = $("#chargetime").val(); //获取转账时间
var chargenum = $("#chargenum").val(); //获取转账单号
var chargemoney = $("#chargemoney").text(); //获取金额
if(!chargetime){
layer.msg("请选择转账时间");
return !1;
}
if(!chargenum){
layer.msg("请填写转账单号");
return !1;
}

if(chargenum.length<28){
layer.msg("请输入正确单号");
return !1;
}
if(chargenum.length>45){
layer.msg("请输入正确单号");
return !1;
}

$.ajax({
url:'/index.php?g=Appapi&m=Charge&a=submitChargeOrder',
type:'POST',
data:{uid:uid,coin:coin,valtype:valtype,chargetime:chargetime,chargenum:chargenum,chargemoney:chargemoney},
dataType:'json',
success:function(data){
if(data.code==0){
layer.msg(data.msg);
}else{
layer.msg(data.msg);
return !1;
}
},
error:function(){
return !1;
}
})

})
</script>

</body>

</html>

星星~笑笑

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js 图片点击查看大图

js 点击图片查看大图备注：其中一些引用文件没法上传，如果有需要的私信即可；人工充值 -->body{width: 97%;margin: auto;}.weixin_ceshi {float: left;text-align: center;width: 50%; position: relativ
复制链接

扫一扫