首页 > SEO优化 > EMlog文章增加打赏二维码

EMlog文章增加打赏二维码

时间:2023年10月23日 分类:SEO优化 浏览量:105

教程演示

教程简介

基于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}

觉得文章有用就打赏一下文章作者

微信扫一扫打赏

标签: