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="那是二个尊贵的私人商品房花园,住着Alice..." ; break; }
case "2":{ imgs="images/mama.bmp"; name="一人母亲的记忆 爱心团..." ; word="那是一个关于阿娘的轶事,感染了每当中夏族民共和国人,她是一人暴走族阿妈,也是一位为孙子捐募肝的亲娘,她越发一人圣人的,标准的中华老妈..." ; break; }
case "3":{ imgs="images/nikesong.bmp"; name="Nick外祖父讲旧事 (Bart沃斯, 漪然)..." ; word="★当当代界最优异的孩子绘本小说家、插艺术家!<br>★获得一九九四年度英帝国图书奖(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职位)
}

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

图片 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;
}
/* 弹出层的针对性Logo,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地方,此时-贰拾五个成分是巩固那些Div的中度,让箭头指向对应行
var finalleft=mLeft+addLeft+20; // 获取最后成分出现Left的,对应行的左边加上行宽加上十八个空成分
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();
}

最终显示效果如下:
图片 3

图片 4

鼠标移动到相应的数据行上边,展现相应的提醒框,右侧的打叉小Logo用以关闭全数弹出层...
统一筹划小结:

本条企划进度的基本点是position:absolute(相对定位,效能是让层在页面上附加),z-index(用以突显层的附加次序),top、left(彰显弹出页面坐标),(offset().left,offset().top)在页面上找到某些成分的坐标,地点找到了,就足以率性在它的科学普及定位弹出层了,别的的体制能够依照本人的油画须求随意调解...

源码下载

您可能感兴趣的稿子:

  • web前端开采也亟需日志
  • web的各类前端打字与印刷格局之jquery打字与印刷插件PrintArea达成网页打字与印刷
  • web的各样前端打字与印刷格局之jquery打字与印刷插件jqprint完结网页打字与印刷
  • ASP.net WebAPI 上传图片实例
  • .Net基于MVC4 Web Api输出Json格式实例
  • web前端设计员们常用的jQuery特效插件汇总
  • WEB前端设计员常用工具集锦
  • 用Python编写web API的教程
  • 一张Web前端的思维导图分享
  • PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
  • web前端开荒JQuery常用实例代码片段(肆十九个)
  • 包罗一定当前地点的百度地图前端web api实例代码

本文由华夏彩票发布于计算机网络,转载请注明出处:Web前端设计情势

您可能还会对下面的文章感兴趣: