设计场景:
Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),当初设计的时候并i没有过于丰富的构思...
现在问题来了,这个版块不大,更新频率却很高,每天都有十数条最新的信息上去,浏览网站的会员对于最新图书的了解和需求越来越大,因此需要对这个板块进行改良,以满足会员的需求,会员的主要要求有以下几个方面:显示该最新上架的图书的封面缩略图,该图书的名称和作者名称,以及该书部分内容的介绍和作者的简介...
这下把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位置)
}
结果如下(当鼠标指向第三条数据时,弹出该框, 并随鼠标移动):
做到这边,会员有了一个新的要求,就是不要弹出框随着鼠标的移动而移动,那样鼠标一旦离开焦点,就会移除该弹出框,操作起来不是很方便。他们要求弹出框固定,假设就在相应的数据行的右侧吧,而且打开和关闭由会员自己控制,于是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();
}
最终显示效果如下:
鼠标移动到相应的数据行上面,显示相应的提示框,右边的打叉小图标用以关闭整个弹出层...
设计小结:
这个设计过程的关键是position:absolute(绝对定位,作用是让层在页面上叠加),z-index(用以显示层的叠加次序),top、left(显示弹出页面坐标),(offset().left,offset().top)在页面上找到某个元素的坐标,位置找到了,就可以随意在它的周边定位弹出层了,其他的样式可以根据自己的美工需求随意调节...
源码下载(https://files.cnblogs.com/wzh2010/popDiv.rar)
揭东县信息中心采用We7站群管理系统重新架构揭东县政务网 开源CMS
中国计算机报:We7云计算重塑政府门户网站群 开源CMS
We7网站群系统全新打造辽宁省民政厅网站群平台 开源CMS
We7网站群为华中科技大学同济医学院附属同济医院提供专业网... 开源CMS
sso实现原理解析
TDSQL | DB·洞见回顾|基于LSMTree存储的数据库性能改进
又拿奖了!腾讯云原生数据库TDSQLC斩获2021PostgreSQL中国最佳数据库产品奖
为云而生,云原生数据库TDSQLC技术突破与演进
金融级数据库新坐标:腾讯云TDSQL发布全自研新敏态引擎
- 最新文章
-
Hashtable.Keys.CopyTo(Array,int)方法只能拷贝一维数组吗?能不能拷贝二维数组呢?
心随风漂
星际争霸十大挖掘性操作
媳妇必须做到的八耻八荣
2007XP豪华版怎么破解微软的正版验证啊?
星际里的一些常用操作技巧
cf1422F. Boring Queries
2019 ICPC AsiaEast Continent Final
2020 China Collegiate Programming Contest, Weihai Site
attention!
- 热门文章
-
cf1592F2. Alice and Recoloring 2
cf1539E. Game with Cards
20182019 ACMICPC, Asia East Continent Finals
20172018 ACMICPC Asia East Continent League Final (ECLFinal 2017)
cf1586F. Defender of Childhood Dreams
The 2019 China Collegiate Programming Contest Harbin Site
西部动力成功中标围场县政府网站群建设项目 开源CMS
西部动力(北京)科技有限公司与西安未来国际信息股份有限公司成功签订“通辽市政府网站群云平台”项目 开源CMS
象山县教育局网站群建设项目签约西部动力 开源CMS
We7网站群系统中标成都体育学院项目 开源CMS