H5页面 js终端设备验证 jquery动画弹框效果 源码下载和解析

今天做了一个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在国内，速度非常快，也是一个非常不错的选择。

完整代码链接 https://gitee.com/cnhellorui/some_source_code。欢迎小伙伴能够follow and star me。谢谢

注：每天干的活很杂很乱，从linux，mcu到java后端，然后前端。弄得东西多了，严谨态度就会降低，而且代码中肯定会存在错误。如果发现到这些问题，请联系我或给我留言。email: chenrui@marsdl.com