如何在Web前端制作漂亮的弹出层,翁智华写了一篇博文《Web前端设计模式--制作漂亮的弹出层》为我们列出了详细解决方案。现把此文转载以此。全文如下:
设计场景:
Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),当初设计的时候并i没有过于丰富的构思……
现在问题来了,这个版块不大,更新频率却很高,每天都有十数条最新的信息上去,浏览网站的会员对于最新图书的了解和需求越来越大,因此需要对这个板块进行改良,以满足会员的需求,会员的主要要求有以下几个方面:显示该最新上架的图书的封面缩略图,该图书的名称和作者名称,以及该书部分内容的介绍和作者的简介……
这下把Ben给愁坏掉了,首页上根本就没有多余的空间,怎么来呈现封面缩略图甚至是内容简介,如果去掉别的板块空间来实现这一板块的扩张,无异于在一家公司以牺牲一个部门来壮大另外一个部门,这是万万不可取的……
于是Ben想到了以弹出层的方式来显示每条信息的详细内容……
设计目标:
在不改变页面结构的情况下,以弹出层(用Dom重构的方式来实现元素的追加append和移除remove)的方式提高页面信息量……
解决方案:
首先,我们设计一个Div,样式如下:
- .TipDiv
- {
- width:500px;
- height:120px;
- padding:8px;
- border-top:solid 5px #a6c9e2;
- border-bottom:solid 5px #a6c9e2;
- border-left:solid 1px #a6c9e2;
- border-right:solid 1px #a6c9e2;
- background:#ffffff;
- z-index:10;/*z-index很重要,它决定了Div框在页面上的叠加顺序*/
- position:absolute;/*绝对定位,它决定了该元素可以根据top 和 left 叠在其他元素上*/
- }
-
- .TipDiv img
- {
- width:110px;
- height:110px;
- margin-right:36px;
- margin-left:10px;
- float:left;
- }
-
- .TipDiv span
- {
- /*×*/
- width:340px;
- height:110px;
- float:left;
- word-break:break-all;
- border-top:dashed 1px #3a7ac8;
- margin-top:8px;
- }
|
下面是脚本,当鼠标经过的时候才响应弹出框事件:
- $(document).ready(function(){
- //标题鼠标经过
- $("ul li a").mousemove(function(e){
- $(".TipDiv").remove();//若页面上有该元素,则移除该元素...0
- var x=e.clientX + 10;//获取鼠标的x轴坐标
- var y=e.clientY + 10;//获取鼠标的y轴坐标
- var num=$(this).attr("id");
- var imgs;
- var word;
- var name;
-
- switch(num)
- {
- case "1":{ imgs="images/mimi.bmp"; name="秘密 朗达·拜恩 (Rhonda Byrne)..." ;
- word="这是一个神圣的秘密花园,住着爱丽丝..." ; break; }
- case "2":{ imgs="images/mama.bmp"; name="一位母亲的记忆 爱心团..." ;
- word="这是一个关于母亲的故事,感染了每个中国人,她是一位暴走族母亲,也是一位为儿子捐献肝的母亲,
- 她更是一位伟大的,典型的中国母亲..." ; break; }
- case "3":{ imgs="images/nikesong.bmp"; name="尼克爷爷讲故事 (巴特沃斯, 漪然)..." ;
- word="当今世界最出色的儿童绘本作家、插画家!<br>获得1992年度英国图书奖(British Book Awards)<br>
- 全球每15分钟就有一本由他创作的绘本被买走<br>他的绘本让阅读变得赏心悦目!" ; break; }
- case "4":{ imgs="images/lqz.bmp"; name="李清照:人生不过一场绚烂花(蔚起)..." ;
- word="《李清照:人生不过一场绚烂花事》精选易安词作50首,从《武陵春(风住尘香花已尽)》始,
- 至《好事近(风定落花深)》结束。通篇以闲话家常、婉约诚挚的笔法评析、阐释,娓娓道来,不生涩,没有说教。"
- ; break; }
- }
-
- popDiv(imgs,name,word,x,y);
-
- })
-
-
-
- //标题鼠标离开
- $("ul li a").mouseout(function(){
- $(".TipDiv").remove();
- })
-
- })
-
-
- //随鼠标移动的信息框
- function popDiv(face,name,info,xx,yy)
- {
- var str="";
- str+="<div class='TipDiv'>";
- str+="<img alt='face' src='"+face+"'/>";
- str+="<strong><em>"+name+"</em></strong><br />";
- str+="<span>"+info+"</span>";
- str+="<div>";
- $('body').append(str);//在页面上追加该元素,样式如上已经写好
- $(".TipDiv").css({"top":yy+"px","left":xx+"px"});
- //设置该元素出现的位置(这里是出现在鼠标的右边和下边的偏离10px位置)
- }
|
结果如下(当鼠标指向第三条数据时,弹出该框, 并随鼠标移动):
更多内容请见:http://www.cnblogs.com/wzh2010/archive/2010/10/29/1863884.html
相关链接:
IE 9开发大赛火热报名进行中
微软最顶级平台重要会议PDC10隆重开幕 全球在线直播中
Microsoft Web平台——优秀项目展示
Windows Phone 7 MSDN开发中心