精华内容
下载资源
问答
  • // 如果为白屏,可以对白屏一些你自己要干的事情,比如我们会把错误上传到自己公司的管理后台监测模块,方便我们及时知道白屏出现,以及修复 } } 那么为什么是 empty === 36 不是 empty === 40,明明埋了40个点,...

    前言

    “白屏”,我作为一个切图切到手的切图崽,听运营那边反馈真不少了;有时一大早的就嚷嚷着:“那个切图崽,我们的产品又白屏啦。”;此时,我心中是“WDNMD”。其实,这个问题还是挺恶心的,要是在测试环境被测出来还好,可以及时修复;但是在生产环境,这就TMD;因为你也不知道什么时候就出现了这个问题,是刚出现的,还是昨天,还是一周前...这样就会造成不必要的损失。在生产环境,我们可爱的用户,会把“白屏”认为正在加载,一直在等,一直等到绝望,然后就去投诉运营:“你们的产品真垃圾,加载一天都没加载出来”。最后,运营就YY前端。老子,受够了,老子一定要在“白屏”出现的第一时间,消灭它;那么怎么才知道它出现了呢?那就要“埋个地雷了”(一般称为埋点)。那么怎么埋?又什么时候埋?

    怎么埋 ?

    这里要按自己公司的产品或者自己的项目来决定了。下面是我对公司的产品提出的三个“埋点方案”,可参考,但不一定适合你们。

    垂直埋点

    因为我们产品,主要页面都是居中布局,所以这种“埋点”可以满足我们产品的80%页面。垂直“埋点”,也就是在X,Y轴上埋,看图

    ea30ecb9e56c7d708b1c5bc3faeafc6a.png

    假设,要在X,Y轴上各埋10个点,每个点的距离相等,那么X轴上的点坐标就是(i/10 * 屏幕的宽度,1/2 * 屏幕的高度, i 代表第几个点。那么Y轴上的坐标就是(1/2 * 屏幕的宽度,i / 10 * 屏幕的高度),it同理。

    得到X,Y轴的坐标公式,如下:

    (屏幕的宽度,屏幕的高度)

    (屏幕的宽度,屏幕的高度)

    交叉埋点

    因为,垂直埋点可以解决居中布局的页面,但是我们有些新闻页面,有时只会在第一象限有内容,这时就进入了这种埋点的盲区了,就会被误判为“白屏”。看图

    6809707f0183d95d2fcc77b27c281b1f.png

    所以,就要考虑交叉埋点方案了。交叉埋点主要是将“地雷”埋在屏幕的两条对角线上。看图

    e55e3b3219385547f5bc910465c02986.png

    这两条对角线为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轴的坐标公式,如下:

    (屏幕的宽度,屏幕的高度)

    (屏幕的宽度,屏幕的高度)

    垂直交叉埋点

    上面说了,我们页面多数都是居中布局,如果,内容比较少,又会进入交叉埋点的盲区,看图

    8e80cc9429d9db43148495d7464451b5.png

    所以,综合上面的情况,最后我们采取了两者结合的埋点方案。看图

    a11adb608b6f6239416d67d11e3699c3.png

    公式就是两者的结合

    (屏幕的宽度,屏幕的高度)

    (屏幕的宽度,屏幕的高度)

    (屏幕的宽度,屏幕的高度)

    (屏幕的宽度,屏幕的高度)

    如何代码实现

    埋点的规则,我们已经找出来了,那么用代码实现就简单到不行了。


    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 ....
        // 如果为白屏,可以对白屏做一些你自己要干的事情,比如我们会把错误上传到自己公司的管理后台监测模块,方便我们及时知道白屏出现,以及修复
      }
    }

    最后

    这是我针对自己公司的需求的埋点方案和实现,可能并不适合你,可能你有更好的实现,欢迎交流。

    85306bca4d4375eacfe5ff0e85166e97.png

    可能你喜欢上面这样埋,哈哈哈(?保命)。

    展开全文
  • 网页中的下拉式菜单

    千次阅读 2012-01-30 18:42:15
    10几年前,我就在网页中用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就可以。


    主要是参考了这篇文章提到的资源:

    30个浏览器当中常用的菜单插件和脚本








    展开全文
  • 像招聘网站那种,一点所在地,弹出了对话框将全国的省份显示(同时自动屏蔽后面的主窗口),待选择了地点后将搜索菜单的相应...像这种较为复杂的复合弹窗下拉菜单怎么做呢,哪位兄弟能赐教提供一些资料,非常感谢,急需
  • 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是一个产品经理必备的专业快速原型设计工具,那么在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文件中修改布局栏数和字体颜色。
  • 毕业五年终于拥有了属于自己的房子,装修完毕之后就开始买...这款电视的外观走的是简洁风,而且开机之后可以看到它的界面设计也非常漂亮,采用了沉浸的杂志化设计,在下拉菜单下有一些快捷功能,在负一屏中就能查询到
  • wxPython学习手册

    热门讨论 2014-04-19 08:01:58
    7.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:27
    mx196756_turkeyscounties 80多个国家的一个下拉菜单 FlashImage 响应鼠标事件的图片渐显渐隐效果 real_networks 在页面中插入流式播放的Real视频和音频文件 MX131662_pdreloadxtension 从新加载Dreamweaver的各项...
  • 这是怎么一回事,能否在不重装系统的情况下使系统恢复到正常启动状态?  出现这种情况是因为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 直接打开包含活动文件...

空空如也

空空如也

1 2
收藏数 24
精华内容 9
关键字:

下拉式菜单怎么做