Hello,我是Q站小编鹏仔,在前段时间,给大家分享了一个用jq实现生成二维码文章页,方便手机扫码预览效果教程,因为要引入jq,很多人不会,并且二维码还不能添加图标,不是很好看,所以本次给大家做一个简单生成带图标二维码教程,用到的是 http://www.topscan.com/pingtai 的api,无需引入。
上次JQ实现的效果教程 http://iqzhan.com/post/219.html
<style>
.tp-qrcode{
width: 120px;
height: 145px;
padding: 5px;
box-sizing: border-box;
position: fixed;
top: 30%;
right: 20px;
z-index: 10;
background: #ffffff;
border-radius: 6px;
box-shadow: 0 0 4px rgba(0,0,0,.35);
text-align: center;
transition: all .3s;
cursor: pointer;
}
.tp-qrcode:hover{
top: 28%;
transition: all .4s;
box-shadow: 0 0 7px rgba(0,0,0,.6);
font-weight: bold;
}
.tp-qrcode span{
color: #a33636;
font-size: 14px;
line-height: 20px;
}
@media screen and (max-width: 1198px){
.tp-qrcode{
display: none;
}
}
#ewmimg{
width: 110px;
height: 110px;
}
</style>
<div class="tp-qrcode"> <img id="ewmimg" src="" /> <span>手机扫码访问</span> </div>
<script> // 获取当前 url 地址 var urlstr = window.location.href; // 通过正则将url的 & 替换为 %26 var urlres = urlstr.replace(/&/g,"%26"); // 获取图片id var ewmimg = document.getElementById("ewmimg"); // 生成二维码图片路径 ewmimg.src= 'http://qr.topscan.com/api.php?bg=ffffff&fg=333333&text=' + urlres + '&logo=http://iqzhan.com/zb_users/theme//tx_resource/include/logo.png' </script>
因为本次topscan的api插件网址不能带有&符号,所以,鹏仔已经用正则进行替换,上述JS代码中,我们只需要修改 logo= 后面跟的图片地址,鹏仔建议自己做个正方形的,或者圆形的,会好看一点哦,我随便放了一张图的地址,大家自行替换吧!
当然,大家也可以根据下方参数进行修改二维码的颜色,背景色,边距等颜色。
基于http协议的免费二维码开放平台,适合任何下载资源类、新闻类等等需要二维码展示的网站。
x 必须用UTF8编码格式,x内容出现 & 符号时,请用 %26 代替,
换行符使用 %0A
参数 | 描述 | 赋值例子 |
---|---|---|
bg | 背景颜色 | bg=颜色代码,例如:bg=ffffff |
fg | 前景颜色 | fg=颜色代码,例如:fg=cc0000 |
gc | 渐变颜色 | gc=颜色代码,例如:gc=cc00000 |
el | 纠错等级 | el可用值:h\q\m\l,例如:el=h |
w | 尺寸大小 | w=数值(像素),例如:w=300 |
m | 静区(外边距) | m=数值(像素),例如:m=30 |
pt | 定位点颜色(外框) | pt=颜色代码,例如:pt=00ff00 |
inpt | 定位点颜色(内点) | inpt=颜色代码,例如:inpt=000000 |
logo | logo图片 | logo=图片地址,例如:logo=http://iqzhan.com/zb_users/theme//tx_resource/include/logo.png |