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

今天做了一个h5下载页面和一个滑动弹窗提示。

这里的图片和一些样式颜色跟原版做了很大修改，主要是因为原原本本的东西涉及到一些商业隐私。

不过没关系，该有的东西都有，你只需要把这个下载下来，然后颜色和图片改改就行了。

H5页面css和div样式布局
layer的弹窗
layer图片弹框
js客户端验证，判断是否是微信，苹果，安卓，还是其他浏览器
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);
            var 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: [email protected]

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

猜你喜欢

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