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="★当今世界最出色的儿童绘本作家、插画家！<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位置） 
}