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

.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="★当今世界最出色的儿童绘本作家、插画家！
★获得1992年度英国图书奖(British Book Awards)
★全球每15分钟就有一本由他创作的绘本被买走
★他的绘本让阅读变得赏心悦目！" ; 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+="