设计场景：

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

}

 

结果如下（当鼠标指向第三条数据时，弹出该框， 并随鼠标移动）：

 

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

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

 

#tips

{

background-color: white;

border-left: 1px solid #a6c9e2;

border-right: 1px solid #a6c9e2;

border-top:5px solid #a6c9e2;

border-bottom:5px solid #a6c9e2;

width:268px; height:60px;

z-index:9;

position:absolute;

-moz-border-radius: 5px; -webkit-border-radius: 5px;

padding:8px 18px;

}

/* 弹出层的指向图标，left：-10 使它出现在整个Div的左侧 */

#tips #tipsArrow {

position:absolute; top:26px; left: -10px }

#tips #light

{

width:36px;

height:36px;

margin:6px 16px 16px 16px;

float:left;

}

#tips span

{

margin-top:18px;

}

#tips #close

{

width:20px;

height:16px;

border:none;

z-index:1;

left:280px;

top:6px;

position:absolute;

cursor:pointer;

}

 

脚本如下：

 

$(document).ready(

function

(){

//

时间鼠标经过

$(

"

ul li span

"

).mouseover(

function

(){

$(

"

#tips

"

).remove();

var

elem

=

$(

this

).parent();

var

mTop

=

elem.offset().top;

//

获取该元素的top坐标

var

mLeft

=

elem.offset().left;

//

获取该元素的left坐标

var

addLeft

=

elem.width();

//

获取该元素的宽度

var

finalTop

=

mTop

-

30

;

//

获取最终元素出现的Top位置，此时-30个元素是提高这个Div的高度，让箭头指向对应行

var

finalleft

=

mLeft

+

addLeft

+

20

;

//

获取最终元素出现Left的，对应行的左边加上行宽加上20个空元素

var

num

=

$(

"

li

"

).index(elem)

+

1

;

popDiv1(finalTop,finalleft,

"

提示框提醒你，这是第

"

+

num

+

"

行数据!

"

);

})

})

//

固定的信息框

function

popDiv1(tops,lefts,messages)

{

var

str

=

""

;

str

=

"

<div id='tips'><img id='tipsArrow' src='images/arrow.png' alt=''/><img id='close' src='images/close.jpg' alt='' οnclick='closeUp()'/><img src='images/light.gif' alt='' id='light'/><p>

"

+

messages

+

"

</p></div>

"

;

$(

'

body

'

).append(str);

$(

"

#tips

"

).css({

"

top

"

:tops

+

"

px

"

,

"

left

"

:lefts

+

"

px

"

});

}

function

closeUp()

{

$(

"

#tips

"

).remove();

}

最终显示效果如下：

 

 

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

 

设计小结：

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

 

    源码下载（）