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


Posted in Javascript onOctober 29, 2010

Web前端设计模式  制作漂亮的弹出层
现在问题来了,这个版块不大,更新频率却很高,每天都有十数条最新的信息上去,浏览网站的会员对于最新图书的了解和需求越来越大,因此需要对这个板块进行改良,以满足会员的需求,会员的主要要求有以下几个方面:显示该最新上架的图书的封面缩略图,该图书的名称和作者名称,以及该书部分内容的介绍和作者的简介...
这下把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位置) 
}

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

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

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

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

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

源码下载 http://xiazai.3water.com/201010/yuanma/popDiv.rar

Javascript 相关文章推荐
javascript 页面只自动刷新一次
Jul 10 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
JS排序之选择排序详解
Apr 08 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 #Javascript
jQuery.ajax 用户登录验证代码
Oct 29 #Javascript
Jquery Autocomplete 结合asp.net使用要点
Oct 29 #Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 #Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 #Javascript
jQuery编写widget的一些技巧分享
Oct 28 #Javascript
jQuery timers计时器简单应用说明
Oct 28 #Javascript
You might like
使用PHP遍历文件夹与子目录的函数代码
2011/09/26 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
介绍Python中几个常用的类方法
2015/04/08 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python文件操作的简单方法总结
2019/11/07 Python
快速了解Python开发环境Spyder
2020/06/29 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
学生打架检讨书
2014/02/14 职场文书
材料加工工程求职信
2014/02/19 职场文书
求职简历自我评价范例
2014/03/12 职场文书
新农村建设标语
2014/06/24 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
文员岗位职责
2015/02/04 职场文书
联谊活动总结范文
2015/05/09 职场文书
美丽心灵观后感
2015/06/01 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
旅游安全责任协议书
2016/03/22 职场文书
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript