EMlog文章增加打赏二维码
时间:2020-08-01 阅读:299
教程演示
教程简介
基于HTML+JS完整好看的弹窗代码 代码可以作为文章 阅读页面 为文章二维码打赏 代码提取于明月浩空的模板非常的实用 教程来自蓝优博客
教程演示
html代码
<a href="javascript:void(0)" onclick="weixin('图片地址')">输出位置</a> <div class="wxbox" style="display: none;"><ul><p class="wxclose"><span class="wxtitle"></span><a href="javascript:;" title="关闭"><i class="fa fa-times"></i></a></p><span class="wxpic"></span></ul></div>
js代码
function weixin(a) { $(".blackground").fadeIn(100); $(".wxtitle").html('<i class="fa fa-qrcode"></i> <span style="color:#f00">QQ 微信 支付宝</span> 扫一扫打赏') $(".wxbox,.wxpic").animate({ opacity: "show", marginTop: "-170px" }, "slow") var wx = new Image(); wx.src =a; wx.onload = function() { setTimeout(function() { $(".wxpic").html('<img src="'+wx.src+'" style="width:260px;height:240px;margin-top:-10px">') }, 100) }; }; $(function(){jQuery(function() { var meta = document.getElementsByTagName('meta'); var a = encodeURIComponent(location.href), b = encodeURIComponent(document.title); $(".wxclose a").click(function() { $(".blackground").fadeOut(100); $(".wxbox").animate({ opacity: "hide", marginTop: "-300px" }, "slow") }) })});
css代码
.wxbox{position:fixed;top:50%;left:50%;z-index:9999;display:none;margin:0 0 0 -150px;padding:20px;width:300px;height:300px;border-radius:20px;background-color:#fff;box-shadow:0 0 10px #000} .wxbox .wxclose{margin-bottom:10px;color:#000;font-weight:700;font-size:18px} .wxbox .wxclose a{float:right;display:block;width:19px;height:19px;-webkit-transition:all .6s ease-in-out 0s;-moz-transition:all .6s ease-in-out 0s;transition:all .6s ease-in-out 0s}
网友评论