• Web前端设计模式--制作漂亮的弹出层


    设计场景:

           Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),当初设计的时候并i没有过于丰富的构思...

          

           现在问题来了,这个版块不大,更新频率却很高,每天都有十数条最新的信息上去,浏览网站的会员对于最新图书的了解和需求越来越大,因此需要对这个板块进行改良,以满足会员的需求,会员的主要要求有以下几个方面:显示该最新上架的图书的封面缩略图,该图书的名称和作者名称,以及该书部分内容的介绍和作者的简介...

           这下把Ben给愁坏掉了,首页上根本就没有多余的空间,怎么来呈现封面缩略图甚至是内容简介,如果去掉别的板块空间来实现这一板块的扩张,无异于在一家公司以牺牲一个部门来壮大另外一个部门,这是万万不可取的...

           于是Ben想到了以弹出层的方式来显示每条信息的详细内容... 

    设计目标:

          在不改变页面结构的情况下,以弹出层(用Dom重构的方式来实现元素的追加append和移除remove)的方式提高页面信息量...

    解决方案:

        首先,我们设计一个Div,样式如下:

      

    代码

    下面是脚本,当鼠标经过的时候才响应弹出框事件:

    代码

    结果如下(当鼠标指向第三条数据时,弹出该框, 并随鼠标移动):

    做到这边,会员有了一个新的要求,就是不要弹出框随着鼠标的移动而移动,那样鼠标一旦离开焦点,就会移除该弹出框,操作起来不是很方便。他们要求弹出框固定,假设就在相应的数据行的右侧吧,而且打开和关闭由会员自己控制,于是Ben就进行改良了...

    同样的,先设计一个id为tips的Div元素,样式如下:

    代码

    脚本如下:

    代码

    最终显示效果如下:

     

    鼠标移动到相应的数据行上面,显示相应的提示框,右边的打叉小图标用以关闭整个弹出层...

    设计小结:

         这个设计过程的关键是position:absolute(绝对定位,作用是让层在页面上叠加),z-index(用以显示层的叠加次序),top、left(显示弹出页面坐标),(offset().left,offset().top)在页面上找到某个元素的坐标,位置找到了,就可以随意在它的周边定位弹出层了,其他的样式可以根据自己的美工需求随意调节...

  • 相关阅读:
    debian 登录CUPS 管理界面报错
    Shell脚本调试技术
    贴个ALSA例程
    产业生态圈和生态圈
    开个帖,开始学习shell编程
    Lua源码阅读建议
    Flash, EEPROM, SPI Flash diff
    makefile中的notdir,wildcard和patsubst
    quartus II使用零星记录
    Hello ZED
  • 原文地址:https://www.cnblogs.com/chenliyang/p/6548507.html
Copyright © 2020-2023  润新知