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

    Hello，我是Q站小编鹏仔，在前段时间，给大家分享了一个用jq实现生成二维码文章页，方便手机扫码预览效果教程，因为要引入jq，很多人不会，并且二维码还不能添加图标，不是很好看，所以本次给大家做一个简单生成带图标二维码教程，用到的是 http://www.topscan.com/pingtai  的api，无需引入。

    上次JQ实现的效果教程 http://qzhan.vip/post/219.html

css代码

<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>

HTML代码

<div class="tp-qrcode">
	<img id="ewmimg" src="" />
	<span>手机扫码访问</span>
</div>

JS代码

<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://qzhan.vip/zb_users/theme//tx_resource/include/logo.png'
</script>

    因为本次topscan的api插件网址不能带有&符号，所以，鹏仔已经用正则进行替换，上述JS代码中，我们只需要修改 logo= 后面跟的图片地址，鹏仔建议自己做个正方形的，或者圆形的，会好看一点哦，我随便放了一张图的地址，大家自行替换吧！  

    当然，大家也可以根据下方参数进行修改二维码的颜色，背景色，边距等颜色。

基于http协议的免费二维码开放平台，适合任何下载资源类、新闻类等等需要二维码展示的网站。

x 必须用UTF8编码格式，x内容出现 & 符号时，请用 %26 代替, 

换行符使用 %0A