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 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
Three.js学习之几何形状
Aug 01 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
vue-ajax小封装实例
Sep 18 Javascript
vue watch关于对象内的属性监听
Apr 22 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 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(8) php 数组
2010/03/05 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
php addslashes及其他清除空格的方法是不安全的
2012/01/25 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
js实现带简单弹性运动的导航条
2017/02/22 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
python调用cmd复制文件代码分享
2013/12/27 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
python字典改变value值方法总结
2019/06/21 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
人力资源部经理助理岗位职责
2014/03/04 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
只用Python就可以制作的简单词云
2021/06/07 Python
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python