给文章生成本地二维码分享按钮

用到的JQ是:jquery.qrcode.min.js,大家可以在网上搜索到,然后是构建按钮点击触发打开二维码,同时通过地址转换成二维码部分:


  1. 我就按照PHPCMSX或PHPCMSV9举例,每个页面都能获取到自己的URL地址,首先在需要添加按钮的页面关联JQ。


<script src="http://域名/statics/js/jquery.min.js" type="text/javascript">


2.然后是给页面增加一个按钮:

<span style="float: right;">    
       	<div class="bshare-custom">    
分享:    
<img src="statics/images/weixin.png" height="20px" alt="点击弹出二维码" onclick="showPopup()">    
<div id="popup" style="display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 1px solid #ccc;padding: 20px;background-color: #fff;">      
<h3 style="float:left;">微信扫码</h3>    
<button style="float: left;width: 25px;height: 25px;margin-left: 160px;margin-bottom: 20px;" onclick="closePopup()">X</button>    
<div id="code"></div>     
</div>    
</div>     
</span>



3.最后在写JS的部分:


<script>    
$cs = 'http://域名/;    
$('#code').qrcode($cs); //任意字符串    
function showPopup() {    
document.getElementById("popup").style.display = "block";    
}    
function closePopup() {    
document.getElementById("popup").style.display = "none";    
}    
</script>


4.最后就是测试效果


image.png

快速仿站

相关推荐

Copyright © 2019-2024 贵州海豹文化传播有限公司 版权所有 · 黔ICP备2022002053号-1
Hello,欢迎来咨询~
新手教程 技术支持 回到顶部