给网站内页添加手机扫码访问教程 给网站添加带logo的二维码教程 网站如何生成二维码

百变鹏仔   ·   发表于 2020-5-29   ·   谈天说地

    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
logologo图片logo=图片地址,例如:logo=http://iqzhan.com/zb_users/theme//tx_resource/include/logo.png
0 条回复   |  直到 2020-5-29 | 1832 次浏览
登录后才可发表内容