81资源网正在用的文章打赏代码

爱折腾的星云 160
OUIMS博客广告

81资源网正在用的文章打赏代码-第1张图片-OUIMS博客

一款81资源网正在用的文章打赏代码 简介:

前几天81网小艾,重新排版了一下网站模板,虽然和之前那个很像,但是有很多的细节全部优化了一下,今天给大家奉上一篇文章。

关于本站的打赏功能的代码,具体请看下方:

一款81资源网正在用的文章打赏 js代码:

function weixin(a) {
	$(".blackground").fadeIn(100);
	$(".wxtitle").html('<i class="iconfont icon-erweima"></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 title="打赏二维码" alt="打赏二维码" 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") }) })});

一款81资源网正在用的文章打赏 css代码:

.xcybk{background:#ed4630;background-size:30px 30px}
.xcybk{display:inline-block;width:50px;height:50px;border-radius:50%;vertical-align:middle;font-weight:700;font-size:24px;line-height:44px}
.wxbox{position:fixed;top:50%;left:50%;z-index:9999;margin:0 0 0 -150px;padding:20px;width:300px;height:300px;border-radius:20px;background-color:#fff;box-shadow:0 0 10px #ccc}
.wxbox .wxclose{margin-bottom:10px;color:#000;font-weight:700;font-size:1pc}
.wxbox .wxclose a{float:right;display:block;width:19px;height:19px;-webkit-transition:all .6s ease-in-out 0s;transition:all .6s ease-in-out 0s}

一款81资源网正在用的文章打赏 html代码:

<span class="xcybk"><a href="javascript:void(0)" onclick="weixin('这里填写二维码打赏图片地址')">赏</a></span>
<div class="wxbox">
	<ul>
		<p class="wxclose">
			<span class="wxtitle"></span><a href="javascript:;" title="关闭"><i class="iconfont icon-guanbi2"></i></a>
		</p>
		<span class="wxpic"></span>
	</ul>
</div>

【原创】一款81资源网正在用的文章打赏代码 使用方法:

1、首先复制上面js代码,记住什么都别修改,粘贴到你网站源码调用的js文件里。

2、复制上面css代码,粘贴到你网站源码调用的css文件里。

3、复制上面html代码,粘贴到你的文章页,根据html代码的提示进行修改。

标签: 精品教程 zblog教程 代码教程

OUIMS博客广告

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~