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

简介: 如何在Web前端制作漂亮的弹出层,翁智华写了一篇博文《Web前端设计模式--制作漂亮的弹出层》为我们列出了详细解决方案。现把此文转载以此。全文如下:设计场景:Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),...

如何在Web前端制作漂亮的弹出层,翁智华写了一篇博文《Web前端设计模式--制作漂亮的弹出层》为我们列出了详细解决方案。现把此文转载以此。全文如下:

设计场景:

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

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

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

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

设计目标:

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

解决方案:

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

 
    
  1. .TipDiv 
  2.         { 
  3.             width:500px; 
  4.             height:120px; 
  5.             padding:8px; 
  6.             border-top:solid 5px #a6c9e2; 
  7.             border-bottom:solid 5px #a6c9e2; 
  8.             border-left:solid 1px #a6c9e2; 
  9.             border-right:solid 1px #a6c9e2; 
  10.             background:#ffffff; 
  11.             z-index:10;/*z-index很重要,它决定了Div框在页面上的叠加顺序*/ 
  12.             position:absolute;/*绝对定位,它决定了该元素可以根据top 和 left 叠在其他元素上*/ 
  13.         } 
  14.          
  15.         .TipDiv img 
  16.         { 
  17.            width:110px; 
  18.            height:110px; 
  19.            margin-right:36px; 
  20.            margin-left:10px; 
  21.            float:left; 
  22.         }  
  23.          
  24.         .TipDiv span 
  25.         { 
  26.             /*×*/ 
  27.           width:340px; 
  28.           height:110px; 
  29.           float:left; 
  30.           word-break:break-all; 
  31.           border-top:dashed 1px #3a7ac8; 
  32.           margin-top:8px; 
  33.         } 

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

 
    
  1. $(document).ready(function(){ 
  2.      //标题鼠标经过 
  3.      $("ul li a").mousemove(function(e){ 
  4.             $(".TipDiv").remove();//若页面上有该元素,则移除该元素...0 
  5.             var x=e.clientX + 10;//获取鼠标的x轴坐标             
  6.             var y=e.clientY + 10;//获取鼠标的y轴坐标 
  7.             var num=$(this).attr("id"); 
  8.             var imgs; 
  9.             var word; 
  10.             var name;            
  11.              
  12.             switch(num) 
  13.             {             
  14.                case "1":{ imgs="images/mimi.bmp"name="秘密 朗达·拜恩 (Rhonda Byrne)..." ; 
  15. word="这是一个神圣的秘密花园,住着爱丽丝..." ; break; } 
  16.                case "2":{ imgs="images/mama.bmp"name="一位母亲的记忆 爱心团..." ;
  17. word="这是一个关于母亲的故事,感染了每个中国人,她是一位暴走族母亲,也是一位为儿子捐献肝的母亲,
  18. 她更是一位伟大的,典型的中国母亲..." ; break; } 
  19.                case "3":{ imgs="images/nikesong.bmp"name="尼克爷爷讲故事 (巴特沃斯, 漪然)..." ;
  20. word="当今世界最出色的儿童绘本作家、插画家!<br>获得1992年度英国图书奖(British Book Awards)<br>
  21. 全球每15分钟就有一本由他创作的绘本被买走<br>他的绘本让阅读变得赏心悦目!" ; break; } 
  22.                case "4":{ imgs="images/lqz.bmp"name="李清照:人生不过一场绚烂花(蔚起)..." ; 
  23. word="《李清照:人生不过一场绚烂花事》精选易安词作50首,从《武陵春(风住尘香花已尽)》始,
  24. 至《好事近(风定落花深)》结束。通篇以闲话家常、婉约诚挚的笔法评析、阐释,娓娓道来,不生涩,没有说教。" 
  25. ; break; } 
  26.             } 
  27.              
  28.           popDiv(imgs,name,word,x,y);  
  29.                   
  30.     }) 
  31.      
  32.      
  33.      
  34.     //标题鼠标离开 
  35.     $("ul li a").mouseout(function(){ 
  36.         $(".TipDiv").remove(); 
  37.     })    
  38.  
  39. }) 
  40.  
  41.  
  42. //随鼠标移动的信息框 
  43. function popDiv(face,name,info,xx,yy) 
  44.        var str=""
  45.        str+="<div class='TipDiv'>"; 
  46.        str+="<img alt='face' src='"+face+"'/>"; 
  47.        str+="<strong><em>"+name+"</em></strong><br />"; 
  48.        str+="<span>"+info+"</span>"; 
  49.        str+="<div>"; 
  50.        $('body').append(str);//在页面上追加该元素,样式如上已经写好 
  51.        $(".TipDiv").css({"top":yy+"px","left":xx+"px"});
  52. //设置该元素出现的位置(这里是出现在鼠标的右边和下边的偏离10px位置) 

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

更多内容请见:http://www.cnblogs.com/wzh2010/archive/2010/10/29/1863884.html

相关链接:

IE 9开发大赛火热报名进行中

微软最顶级平台重要会议PDC10隆重开幕 全球在线直播中

Microsoft Web平台——优秀项目展示

Windows Phone 7 MSDN开发中心

目录
相关文章
|
24天前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
239 91
|
24天前
|
前端开发
【前端web入门第四天】01 复合选择器与伪类选择器
本文档详细介绍了CSS中的复合选择器与伪类选择器。复合选择器包括后代选择器、子代选择器、并集选择器和交集选择器,能够更精确地定位和样式化元素。后代选择器用于选中某元素的所有后代,子代选择器仅选中直接子元素。并集选择器可为多个标签设置相同样式,而交集选择器则选中同时满足多个条件的元素。此外,还介绍了伪类选择器,如鼠标悬停效果和超链接的不同状态。
51 32
【前端web入门第四天】01 复合选择器与伪类选择器
|
24天前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
24天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
51 28
|
7天前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
8天前
|
存储 前端开发 JavaScript
浅谈Web前端安全策略xss和csrf,及又该如何预防?
该文章详细讨论了Web前端安全中的XSS(跨站脚本攻击)和CSRF(跨站请求伪造)攻击原理及其防范措施,帮助读者了解如何保护Web应用程序免受这两种常见安全威胁的影响。
浅谈Web前端安全策略xss和csrf,及又该如何预防?
|
9天前
|
设计模式 前端开发
前端设计模式
前端设计模式
9 1
|
24天前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
35 15
|
23天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
30 11
|
17天前
|
编解码 前端开发 JavaScript
web端 本地调用摄像头、前端摄像头
web端 本地调用摄像头、前端摄像头
下一篇
无影云桌面