-
html屏幕宽度一体式下拉菜单怎么做_针对白屏埋点,我是这样做的
2020-12-25 21:35:23// 如果为白屏,可以对白屏做一些你自己要干的事情,比如我们会把错误上传到自己公司的管理后台监测模块,方便我们及时知道白屏出现,以及修复 } } 那么为什么是 empty === 36 不是 empty === 40,明明埋了40个点,...前言
“白屏”,我作为一个切图切到手的切图崽,听运营那边反馈真不少了;有时一大早的就嚷嚷着:“那个切图崽,我们的产品又白屏啦。”;此时,我心中是“WDNMD”。其实,这个问题还是挺恶心的,要是在测试环境被测出来还好,可以及时修复;但是在生产环境,这就TMD;因为你也不知道什么时候就出现了这个问题,是刚出现的,还是昨天,还是一周前...这样就会造成不必要的损失。在生产环境,我们可爱的用户,会把“白屏”认为正在加载,一直在等,一直等到绝望,然后就去投诉运营:“你们的产品真垃圾,加载一天都没加载出来”。最后,运营就YY前端。老子,受够了,老子一定要在“白屏”出现的第一时间,消灭它;那么怎么才知道它出现了呢?那就要“埋个地雷了”(一般称为埋点)。那么怎么埋?又什么时候埋?
怎么埋 ?
这里要按自己公司的产品或者自己的项目来决定了。下面是我对公司的产品提出的三个“埋点方案”,可参考,但不一定适合你们。
垂直埋点
因为我们产品,主要页面都是居中布局,所以这种“埋点”可以满足我们产品的80%页面。垂直“埋点”,也就是在X,Y轴上埋,看图
假设,要在X,Y轴上各埋10个点,每个点的距离相等,那么X轴上的点坐标就是(i/10 * 屏幕的宽度,1/2 * 屏幕的高度, i 代表第几个点。那么Y轴上的坐标就是(1/2 * 屏幕的宽度,i / 10 * 屏幕的高度),it同理。
得到X,Y轴的坐标公式,如下:
(屏幕的宽度,屏幕的高度)
(屏幕的宽度,屏幕的高度)
交叉埋点
因为,垂直埋点可以解决居中布局的页面,但是我们有些新闻页面,有时只会在第一象限有内容,这时就进入了这种埋点的盲区了,就会被误判为“白屏”。看图
所以,就要考虑交叉埋点方案了。交叉埋点主要是将“地雷”埋在屏幕的两条对角线上。看图
这两条对角线为K1,K2(X,Y轴只是辅助线,方便理解)。我们要在它们身上各埋10个点,每个点的距离也是一样,那么该怎么取它们的坐标点?其实也很容易,我们只有取它们 i/10屏幕宽度,i/10屏幕高度就可以了。那么K1的坐标点就是:K1 = (i/10 * 屏幕宽度,i/10 * 屏幕高度),K2也很容易,只需将K1的坐标点逆向一下就好,K2 = ((10-i)/10 * 屏幕宽度,10-i)/10 * 屏幕g高度)
得到K1,K2轴的坐标公式,如下:
(屏幕的宽度,屏幕的高度)
(屏幕的宽度,屏幕的高度)
垂直交叉埋点
上面说了,我们页面多数都是居中布局,如果,内容比较少,又会进入交叉埋点的盲区,看图
所以,综合上面的情况,最后我们采取了两者结合的埋点方案。看图
公式就是两者的结合
(屏幕的宽度,屏幕的高度)
(屏幕的宽度,屏幕的高度)
(屏幕的宽度,屏幕的高度)
(屏幕的宽度,屏幕的高度)
如何代码实现
埋点的规则,我们已经找出来了,那么用代码实现就简单到不行了。
function blankWhite(){
let point = 10
let warpTag = ['HTML', 'BODY']
let empty = 0
function isWarp (ele){
if(warpTag.includes(ele[0].nodeName)){
empty+=1
}
}
for (let i = 1; i let x = document.elementsFromPoint(i / point * window.innerWidth, window.innerHeight / 2)
let y = document.elementsFromPoint( window.innerWidth / 2, i / point * window.innerHeight)
let k2 = document.elementsFromPoint(i/point * window.innerWidth, i / point * window.innerHeight)
let k1 = document.elementsFromPoint( (point-i)/point * window.innerWidth, (point-i)/point*window.innerHeight)
isWarp(x)
isWarp(y)
isWarp(k2)
isWarp(k1)
}
if(empty === 36){
// doimg someThings ....
// 如果为白屏,可以对白屏做一些你自己要干的事情,比如我们会把错误上传到自己公司的管理后台监测模块,方便我们及时知道白屏出现,以及修复
}
}那么为什么是
empty === 36
不是empty === 40
,明明埋了40个点,细心的同学会发现其实只埋了36个点 (i < point
),为什么只埋36个,不埋满40个,因为,埋满的话,有些点会被埋到外面去了,document.elementsFromPoint
就会返回一个空数组。也有同学会疑问
document.elementsFromPoint
是一个什么?自己看一下MDN哈点这里那么在什么时候埋 ?
这是一个很关键的点,我们要在AJAX之后或者DOM加载完之后再埋。
if(document.readyState === 'complete'){
blankWhite()
}else{
window.addEventListener('load',function(){
blankWhite()
})
}完整代码
if(document.readyState === 'complete'){
blankWhite()
}else{
window.addEventListener('load',function(){
blankWhite()
})
}
function blankWhite(){
let point = 10
let warpTag = ['HTML', 'BODY']
let empty = 0
function isWarp (ele){
if(warpTag.includes(ele[0].nodeName)){
empty+=1
}
}
for (let i = 1; i let x = document.elementsFromPoint(i / point * window.innerWidth, window.innerHeight / 2)
let y = document.elementsFromPoint( window.innerWidth / 2, i / point * window.innerHeight)
let k2 = document.elementsFromPoint(i/point * window.innerWidth, i / point * window.innerHeight)
let k1 = document.elementsFromPoint( (point-i)/point * window.innerWidth, (point-i)/point*window.innerHeight)
isWarp(x)
isWarp(y)
isWarp(k2)
isWarp(k1)
}
if(empty === 36){
// doimg someThings ....
// 如果为白屏,可以对白屏做一些你自己要干的事情,比如我们会把错误上传到自己公司的管理后台监测模块,方便我们及时知道白屏出现,以及修复
}
}最后
这是我针对自己公司的需求的埋点方案和实现,可能并不适合你,可能你有更好的实现,欢迎交流。
可能你喜欢上面这样埋,哈哈哈(?保命)。
-
网页中的下拉式菜单
2012-01-30 18:42:1510几年前,我就在网页中用JS脚本实现下拉式菜单,并且导航条还与主窗口处于不同的帧。无非就是些onmouseover,onmouseout之类的事件罢了。这种效果,只要舍得花时间,一万年总可以做出来,但我并不觉得这有什么技术...10几年前,我就在网页中用JS脚本实现下拉式菜单,并且导航条还与主窗口处于不同的帧。无非就是些onmouseover,onmouseout之类的事件罢了。这种效果,只要舍得花时间,一万年总可以做出来,但我并不觉得这有什么技术含量,只觉繁琐得很,无聊得很。你实现了又能怎么样呢,说明你的技术就比别人强?雕虫小技罢了。可叹,10几年前,我已经开始用javascript,到现在,却没有丝毫长进,非但如此,javascript代码我却越来越看不明白了。主要是它语法太灵活,有好多写法我都不知道是什么意思,也懒得钻研,日复一日,年复一年,转眼老之将至,成为一个即将被淘汰的老代码工。
现在我知道鸟,不用onmouseover,onmouseout也可以实现下拉菜单。就用CSS。
其原理在于:hover。
hover,CSS一个伪类。“这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。”。我一直以为只会用在超链接上,但其实,象<LI>、<DIV>都可以的。
象下面这个例子,就是先将子菜单隐藏起来:并非是visible=none,而是位置处于屏幕外,等鼠标移到父菜单项上,就将位置定义在可见范围内,看上去,就好象菜单弹出来了。这一切,都在CSS中定义,不用写一句JS代码。
关键的CSS语句,注意其中的2个top:
.sf-menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; }
完整的HTML代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>下拉菜单</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style type="text/css"> .sf-menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; } .sf-menu li { float: left; position: relative; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' 非必要 */ } .sf-menu ul li { width: 100%; /* 保证每个子菜单都独占一行 */ } </style> </head> <body> <ul class="sf-menu"> <li> 【有子菜单】 <ul> <li> [子菜单0] </li> <li> [子菜单1] </li> </ul> </li> <li> 【无子菜单】 </li> </ul> </body> </html>
但是IE6不支持这种方式。不过引用下面说的资源中的JS就可以。
主要是参考了这篇文章提到的资源:
-
求教那种弹窗式下拉菜单怎么制作,急需
2016-02-24 02:28:26像招聘网站那种,一点所在地,弹出了对话框将全国的省份显示(同时自动屏蔽后面的主窗口),待选择了地点后将搜索菜单的相应...像这种较为复杂的复合弹窗下拉菜单怎么做呢,哪位兄弟能赐教提供一些资料,非常感谢,急需 -
Jquery和Css实现的下拉菜单代码
2013-10-10 16:29:11各位可以去看看他的菜单是怎么做的。在哪里体现了用户方便。使所有的分类尽量都展示在用户眼中。 2、jquery和CSS3导航下拉菜单特效 导航下拉菜单是一款基于jquery+css3实现的下拉导航菜单特效。 3、多级...1、最新仿京东商城下拉菜单
其实京东的下拉菜单最多的是用户体验。各位可以去看看他的菜单是怎么做的。在哪里体现了用户方便。使所有的分类尽量都展示在用户眼中。2、jquery和CSS3导航下拉菜单特效
导航下拉菜单是一款基于jquery+css3实现的下拉导航菜单特效。3、多级常用简洁灰色下拉菜单特效
灰色下拉菜单特效是一款基于jquery实现的FlexNav响应式菜单,适应于各个屏幕。4、渐变多级下拉菜单导航
渐变多级下拉导航是一款superfish多级下拉菜单的应用,包含3种下拉风格,很不错哦。5、HTML5+CSS3大型下拉菜单
CSS3+HTML5大型下拉菜单是一款基于jquery+CSS3+HTML5实现的大型图文下拉导航菜单代码下载。更多详细:下拉菜单
-
产品经理使用Axure的动态面板做Tab干货分享
2015-05-18 15:22:42相信学习产品经理的童鞋都知道,Axure是一个产品经理必备的专业快速原型设计工具,那么在Axure的使用中,怎么用动态面板做Tab呢?... 2)鼠标触发式和点击触发式的下拉菜单效果:这个可以结合Axure的默认组件中的相信学习产品经理的童鞋都知道,Axure是一个产品经理必备的专业快速原型设计工具,那么在Axure的使用中,怎么用动态面板做Tab呢?下面小编就为大家整理了一二,希望对你有帮助。
首先,我们先来看看Axure的动态面板可以用来做什么:
1)tab式页签的切换效果:Axure的官方给出的实例就是这个
2)鼠标触发式和点击触发式的下拉菜单效果:这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现,常用于导航的原型制作。
3)鼠标触发式的浮窗效果:类似“Alt”的效果,常用于浏览提示和触发式广告。
4)JS的鼠标点击弹层效果:这个是目前使用被广泛使用的效果之一。
5)注册表单中的根据焦点判断提示的效果:当焦点在输入框内的时候提示该表单栏目填写规范,当焦点离开输入框的时候根据填写的结果提示正确或者错误原因,这个需要动用高级设计交互编辑功能结合Axure的逻辑条件和设置变量功能来实现。
在用Axure的动态面板做Tab,主要需要通过以下几个步骤实现:
1、拖动一个动态面板组件到页面编辑区域
2、给动态面板添加2个状态:
1)单击右键》编辑动态面板》管理面板状态
2)点击加号按钮,可以不断的添加状态
3)点击第二个红色的框,可以编辑该动态面板的所有状态
3、在状态1页面拖动两个矩形组件
4、设置点击切换
1)选中状态1组件,弹出用例编辑器,
2)选中【设置动态面板状态】
3)选中对应状态(状态1)
5、复制该动态面板的矩形组件到状态2,完成tab的制作。
推荐学习:产品经理视频教程
-
Bootstrap用户手册
2014-10-08 18:03:10这本书教你怎么用Bootstrap框架轻松设计出“杀手级”界面及响应式网站。... 作为源自Twitter的一个开源框架,而且可以...使用jQuery插件实现渐进的幻灯片、标签页式界面和下拉菜单; 在LESS文件中修改布局栏数和字体颜色。 -
目前口碑最好的电视机哪款适合年轻家庭?75寸入手亲测
2021-02-23 16:21:28毕业五年终于拥有了属于自己的房子,装修完毕之后就开始买...这款电视的外观走的是简洁风,而且开机之后可以看到它的界面设计也非常漂亮,采用了沉浸式的杂志化设计,在下拉菜单下有一些快捷功能,在负一屏中就能查询到 -
wxPython学习手册
2014-04-19 08:01:587.4.5 如果我想要下拉形式的选择该怎么做? 213 7.4.6 我能够将文本域与列表合并在一起吗? 214 7.5 本章小结 216 8、把窗口部件放入框架中 218 8.1 框架的寿命 218 8.1.1 如何创建一个框架? 218 创建一个简单的... -
70款经典Dreamweaver插件
2011-09-21 12:42:27mx196756_turkeyscounties 80多个国家的一个下拉菜单 FlashImage 响应鼠标事件的图片渐显渐隐效果 real_networks 在页面中插入流式播放的Real视频和音频文件 MX131662_pdreloadxtension 从新加载Dreamweaver的各项... -
电脑高手必备 Windows系统35招实用技巧
2009-06-11 14:42:10这是怎么一回事,能否在不重装系统的情况下使系统恢复到正常启动状态? 出现这种情况是因为C盘下面的“Boot.ini”文件被破坏了。但是由于你 的机器中只有一个操作系统,当然它就是默认的操作系统,即使“Boot.... -
excel的使用
2012-11-25 17:06:01先在一单元格内填入“*”或“~”等符号,然后单击此单元格,向右拖动鼠标,选中横向若干单元格,单击“格式”菜单,选中“单元格”命令,在弹出的“单元格格式”菜单中,选择“对齐”选项卡,在水平对齐下拉列表中... -
asp.net知识库
2015-06-18 08:45:45怎么在ASP.NET 2.0中使用Membership asp.net 2.0-实现数据访问(1) ASP.NET 2.0 新特性 .NET 2.0里使用强类型数据创建多层应用 在MastPage中引用脚本资源 2.0正式版中callback的一些变化+使用示例(ASP.NET 2.0)... -
arcgis工具
2012-10-22 22:37:31在做外联如EXCEL等的时候对数据有一些要求,确保第一行包含字段名,这些字段名不能超过十个字母,不能出现特殊字符。最好把EXCEL保存为.csv文件去除一些不兼容的内容再连接。 转载ESRI论坛Lucy1114帖子说明: 12... -
vc++ 应用源码包_1
2012-09-15 14:22:12内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、字符串、文件读写操作、文件与文件夹属性操作、文件与文件夹系统操作、系统控制操作、程序... -
vc++ 应用源码包_2
2012-09-15 14:27:40内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、字符串、文件读写操作、文件与文件夹属性操作、文件与文件夹系统操作、系统控制操作、程序... -
vc++ 应用源码包_6
2012-09-15 14:59:46内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、字符串、文件读写操作、文件与文件夹属性操作、文件与文件夹系统操作、系统控制操作、程序... -
vc++ 应用源码包_5
2012-09-15 14:45:16内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、字符串、文件读写操作、文件与文件夹属性操作、文件与文件夹系统操作、系统控制操作、程序... -
vc++ 应用源码包_4
2012-09-15 14:38:35内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、字符串、文件读写操作、文件与文件夹属性操作、文件与文件夹系统操作、系统控制操作、程序... -
vc++ 应用源码包_3
2012-09-15 14:33:15内含各种例子(vc下各种控件的使用方法、标题栏与菜单栏、工具栏与状态栏、图标与光标、程序窗口、程序控制、进程与线程、字符串、文件读写操作、文件与文件夹属性操作、文件与文件夹系统操作、系统控制操作、程序... -
javascript函数的解释
2011-02-26 11:03:52其实就是搞清做什么,怎么做的问题,先把流程图画出来,拆解开,一个个做好了然后再合并。理论的东西我不会讲,直接举例哈! function g(o){return document.getElementById(o);} function hitover(n) { for(i=1... -
Visual Studio程序员箴言中文扫描PDF
2010-12-28 01:04:18技巧4.1 使用ctrl+alt+下箭头打开文件选项卡频道的文件下拉菜单 72 技巧4.2 使用文件选项卡频道上的“除此之外全部关闭” 72 技巧4.3 从文件选项卡频道复制文件的完整路径 73 技巧4.4 直接打开包含活动文件的... -
Visual Studio程序员箴言--详细书签版
2012-10-16 20:37:39技巧4.1 使用Ctrl+Alt+下箭头打开文件选项卡频道的文件下拉菜单 72 技巧4.2 使用文件选项卡频道上的“除此之外全部关闭” 72 技巧4.3 从文件选项卡频道复制文件的完整路径 73 技巧4.4 直接打开包含活动文件...
-
在 Linux 上构建企业级 DNS 域名解析服务
-
phpExcel导出时,windows正常,linux报Class ‘PHPExcel_Writer_Excel2007‘ not found
-
OpenWrt-CI-源码
-
通过低秩和稀疏分解实现强大的多视图聚类
-
pictweet:练习-源码
-
项目经理成长之路
-
kotlin教程!阿里P7级别面试经验总结,含泪整理面经
-
RapidScada从入门到精通
-
通过图像表示学习进行有监督的哈希检索
-
android自动化!5年经验Android程序员面试27天,大厂面经合集
-
test_git-源码
-
android-dev-challenge-compose-week1:使用Jetpack Compose的Puppy收养应用程序-源码
-
android视频教程!微信小程序的事件处理,已拿到offer
-
Jsplumb从入门到实战
-
Docker从入门到精通
-
github-slideshow:由机器人提供动力的培训资料库-源码
-
ai脚本插件合集7.5版
-
react+redux+koa技术栈实现小结
-
day18面向对象续
-
Galera 高可用 MySQL 集群(PXC v5.7+Hapro)