給網站內頁添加手機掃碼訪問教程 給網站添加帶logo的二維碼教程 網站如何生成二維碼

    Hello，我是Q站小編鵬仔，在前段時間，給大家分享了一個用jq實現生成二維碼文章頁，方便手機掃碼預覽效果教程，因爲要引入jq，很多人不會，並且二維碼還不能添加圖標，不是很好看，所以本次給大家做一個簡單生成帶圖標二維碼教程，用到的是 http://www.topscan.com/pingtai  的api，無需引入。

    上次JQ實現的效果教程 http://iqzhan.com/post/219.html

原文 http://iqzhan.com/post/260.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

具體詳情 http://iqzhan.com/post/260.html