手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Web前端设计模式 制作漂亮的弹出层
Web前端设计模式 制作漂亮的弹出层
摘要:现在问题来了,这个版块不大,更新频率却很高,每天都有十数条最新的信息上去,浏览网站的会员对于最新图书的了解和需求越来越大,因此需要对这个板块...

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

现在问题来了,这个版块不大,更新频率却很高,每天都有十数条最新的信息上去,浏览网站的会员对于最新图书的了解和需求越来越大,因此需要对这个板块进行改良,以满足会员的需求,会员的主要要求有以下几个方面:显示该最新上架的图书的封面缩略图,该图书的名称和作者名称,以及该书部分内容的介绍和作者的简介...

这下把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>";

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

}

结果如下(当鼠标指向第三条数据时,弹出该框, 并随鼠标移动):

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

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

}

最终显示效果如下:

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

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

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

设计小结:

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

【Web前端设计模式 制作漂亮的弹出层】相关文章:

自适应图片大小的弹出窗口

JavaScript获取并更改input标签name属性的方法

node.js微信公众平台开发教程

js控制div弹出层实现方法

在JavaScript中处理时间之setMinutes()方法的使用

让innerHTML的脚本也可以运行起来

IP地址输入框

jQuery插件制作之全局函数用法实例

jQuery计算文本框字数及限制文本框字数的方法

jquery实现弹出层效果实例

精品推荐
分类导航