今天做了一个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);
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