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位置） }