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

程序员文章站 2022-03-12 17:54:41

...

现在问题来了，这个版块不大，更新频率却很高，每天都有十数条最新的信息上去，浏览网站的会员对于最新图书的了解和需求越来越大，因此需要对这个板块进行改良，以满足会员的需求，会员的主要要求有以下几个方面：显示该最新上架的图书的封面缩略图，该图书的名称和作者名称，以及该书部分内容的介绍和作者的简介...
这下把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="★当今世界最出色的儿童绘本作家、插画家！
★获得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+="

";
str+=" Web前端设计模式制作漂亮的弹出层_jquery

";
str+=""+name+"
";
str+=""+info+"";
str+="

";
$('body').append(str);//在页面上追加该元素，样式如上已经写好
$(".TipDiv").css({"top":yy+"px","left":xx+"px"});//设置该元素出现的位置（这里是出现在鼠标的右边和下边的偏离10px位置）
}

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

Web前端设计模式制作漂亮的弹出层_jquery
做到这边，会员有了一个新的要求，就是不要弹出框随着鼠标的移动而移动，那样鼠标一旦离开焦点，就会移除该弹出框，操作起来不是很方便。他们要求弹出框固定，假设就在相应的数据行的右侧吧，而且打开和关闭由会员自己控制，于是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="

"+messages+"

";
$('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）在页面上找到某个元素的坐标，位置找到了，就可以随意在它的周边定位弹出层了，其他的样式可以根据自己的美工需求随意调节...

源码下载 http://xiazai.jb51.net/201010/yuanma/popDiv.rar