今天做了一個h5下載頁面和一個滑動彈窗提示。

這裡的圖片和一些樣式顏色跟原版做了很大修改，主要是因為原原本本的東西涉及到一些商業隱私。

不過沒關係，該有的東西都有，你只需要把這個下載下來，然後顏色和圖片改改就行了。

1. H5頁面css和div樣式佈局
2. layer的彈窗
3. layer圖片彈框
4. js客戶端驗證，判斷是否是微信，蘋果，安卓，還是其他瀏覽器
5. jquery動態修改css樣式

下面的截圖是點選下載按鈕後彈出圖片的截圖（背景變成黑色透明，彈出圖片顯示）

下面是一些主要注意的程式碼

彈框程式碼

function browser_open() {
	layer.open({
		content: '<img src="img/browser_open.png" id="browser_img"/>'
	});
	$(".layui-m-layerchild").css("background-color", "inherit");
	$(".layui-m-layer0 .layui-m-layerchild").css("width","65%");

	//$(".layui-m-layermain .layui-m-layersection").css("vertical-align", "top");


	$(".layui-m-layer").click(function () {
		//清除頁面層
		if($(".layui-m-layer").attr("id")) {
			$(".layui-m-layer").remove();
		}
	});
}
 

判斷訪問的客戶端的程式碼

var isIDevicePhone = (/iphone|ipod/gi).test(navigator.userAgent);
var isIDeviceIpad = !isIDevicePhone && (/ipad/gi).test(navigator.userAgent);
var isIDevice = isIDevicePhone || isIDeviceIpad;
var isAndroid = !isIDevice && (/android/gi).test(navigator.userAgent);
var isandroid2_x = !isIDevice && (/android\s?2\./gi).test(navigator.userAgent);
ar isIEMobile = !isIDevice && !isAndroid && (/MSIE/gi).test(navigator.userAgent);
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.match(/micromessenger/gi);
var wxios = document.querySelector('.wxios');
var wxandroid = document.querySelector('.wxandroid');
 

html和css程式碼就不貼在頁面上了，如果貼上去真的是太多了。我放在gitee裡面，本來想放在github上的，但是clone速度太慢了。gitee在國內，速度非常快，也是一個非常不錯的選擇。

注：每天干的活很雜很亂，從linux，mcu到java後端，然後前端。弄得東西多了，嚴謹態度就會降低，而且程式碼中肯定會存在錯誤。如果發現到這些問題，請聯絡我或給我留言。email: [email protected]