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 相关文章推荐
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
js替代copy(示例代码)
Nov 27 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
JS实现评价的星星功能
Aug 20 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
JavaScript 声明私有变量的两种方式
Feb 05 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数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
基于jquery+thickbox仿校内登录注册框
2010/06/07 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
vue组件name的作用小结
2018/05/23 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
scrapy爬虫实例分享
2017/12/28 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
实习生自荐信范文
2013/11/13 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
团代会邀请函
2015/02/02 职场文书
公司食堂管理制度
2015/08/05 职场文书
python process模块的使用简介
2021/05/14 Python
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
Python Matplotlib库实现画局部图
2021/11/17 Python