HTML布局实战（1）-简单的半透明浮层

2010年9月2日 | 标签: JavaScript, xhtml, 网页布局

今天在写页面的时候，遇到一个效果，乍一看挺简单的，可实现过程却费了一番周折，最后还不禁完美。年纪大了，脑子也不大好转，乘着现在还没有忘记，整理下思路赶紧记下来。

其实效果很简单，如图所示：

鼠标触发效果

默认显示的是一张图片和关注信息，当鼠标浮动到图片上时，显示一个半透明的浮层，并且有两个链接。

当时的第一感觉，这个效果可以用a:hover来实现半透明层的显示隐藏。如果层中只是纯文字，那就可以这样写结构，但现在层里是两个操作链接，html嵌套规则是绝对不允许a标签再嵌套a标签的；如果换其他标签用onclick事件来处理，这样又似乎不太语义化，看来这弹出的效果只能用js来实现了。

其实页面的结构很简单：

<div class="user_info">
<a href="#"><img alt="" src="images/pic.jpg" /></a>
<p><strong>1234</strong>人关注</p>
<p><a class="attention" href="#">关注</a></p>
<div class="operate"><a href="#">TA申请的学校</a><a href="#">TA获得的offer</a></div>
</div>

显示隐藏效果这里就用最简单的方法来实现：

<script type="text/javascript">
function openVessel(strId)
{
document.getElementById(strId).style.display = "block";
}
function closeVessel(strId)
{
document.getElementById(strId).style.display = "none";
}
</script>

稍作修改后代码如下：

<div class="user_info"><a onmouseout="closeVessel('operate');" onmouseover="openVessel('operate');" href="#"><img alt="" src="images/pic.jpg" /></a>
<p><strong>1234</strong>人关注</p>
<p><a class="attention" href="#">关注</a></p>
<div id="operate" class="operate" onmouseout="closeVessel('operate');"><a href="#">TA申请的学校</a><a href="#">TA获得的offer</a></div>
</div>

加上css样式后浏览下效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> /*=== 全局定义 ===*/ body,div,span,img,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,hr,blockquote,pre,sup,sub,dfn,cite,kbd,samp,form,frame,frameset,fieldset,table,th,td,th,i,label,legend,button,input{margin:0;padding:0;} body {background:#fff; color:#000; font:12px "微软雅黑","宋体"; text-align:center; margin:0 auto;} h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;} table{border-collapse:collapse; border-spacing:0;} address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; } img,fieldset {border:0 none; vertical-align:top;} ul,ol,li {list-style:none;} q:before, q:after { content:''; } /*=== 链接 ====*/ a {color:#034A80; text-decoration:none;} a:hover{color:#f00; text-decoration:underline;} /*===　浮动和清除浮动 ===*/ .clear {clear:both; height:0; overflow:hidden;} .clearfix:after {content:"."; display:block; height:0px; clear:both; visibility:hidden; } .clearfix {zoom:1;} /*=== 布局 ====*/ .user_info {width:106px; background:#EFEFEF; border:1px solid #C8CAC7; margin:50px auto; padding:5px 4px; position:relative;} .user_info img {width:106px; margin:0 auto;} .user_info p {color:#666; line-height:21px;} .user_info p strong {color:#86AE3C; font-weight:bold;} .user_info .attention {width:86px; height:18px; background:url(/wp-content/uploads/demo/opacitylayer/images/btn.png) no-repeat; line-height:9999px; display:inline-block; overflow:hidden;} .user_info .operate {width:106px; height:36px; background:#000; display:none; margin:0 4px; position:absolute; top:75px; left:0; z-index:100;} .user_info .operate a {color:#fff; text-decoration:none; display:block;} .user_info .operate a:hover {color:#fff; text-decoration:underline;} </style> </head> <body> <div class="user_info"> <a onmouseout="closeVessel('operate');" onmouseover="openVessel('operate');" href="#"><img alt="" src="/wp-content/uploads/demo/opacitylayer/images/pic.jpg" /></a> <p><strong>1234</strong>人关注</p> <p><a class="attention" href="#">关注</a></p> <div id="operate" class="operate" onmouseout="closeVessel('operate');"><a href="#">TA申请的学校</a><a href="#">TA获得的offer</a></div> </div> <script type="text/javascript"> function openVessel(strId) { document.getElementById(strId).style.display = "block"; } function closeVessel(strId) { document.getElementById(strId).style.display = "none"; } </script> </body> </html>

提示：你可以先修改部分代码再运行。

这样虽然实现了效果，但感觉很怪，但鼠标触发图片，显示弹出层后，鼠标悬浮在层上的指针有明显的晃动感，点击链接也感觉很不舒服，为什么这样呢？应该是与前面的onmouseover事件有关系。这样肯定不行，如何能改进呢？

对了，还有效果没有实现，浮层是半透明的，这个貌似是很简单的，用现成的代码试试。

.css {...; background:#000; filter:alpha(opacity=50); -ms-filter:"alpha(opacity=50)"; -moz-opacity:0.5; -khtml-opacity: 0.5; opacity:0.5;...}

透明效果实现了，但有个问题，透明层里面的元素包括文字部分也变成半透明的，这样还是不完美。再想想，如果我们将文字部分和半透明层分开，然后像photoshop中的图层一样将各部分叠加在一起，正好可以实现我们的效果；这样的缺点就是增加了多余的代码，页面结构更复杂了。

鼠标指针晃动感和点击链接困难的问题还是没有很好的解决，不过可以使用个偷懒的方法，将a标签中的onmouseover和onmouseout事件放在最外层的div容器中，当然最根本的原因是自己的js水平太懒，赶紧学习，争取能早日将这个问题解决掉。如果哪位朋友有更好的方法，欢迎指教。

这是完整的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> /*=== 全局定义 ===*/ body,div,span,img,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,hr,blockquote,pre,sup,sub,dfn,cite,kbd,samp,form,frame,frameset,fieldset,table,th,td,th,i,label,legend,button,input{margin:0;padding:0;} body {background:#fff; color:#000; font:12px "微软雅黑","宋体"; text-align:center; margin:0 auto;} h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;} table{border-collapse:collapse; border-spacing:0;} address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; } img,fieldset {border:0 none; vertical-align:top;} ul,ol,li {list-style:none;} q:before, q:after { content:''; } /*=== 链接 ====*/ a {color:#034A80; text-decoration:none;} a:hover{color:#f00; text-decoration:underline;} /*===　浮动和清除浮动 ===*/ .clear {clear:both; height:0; overflow:hidden;} .clearfix:after {content:"."; display:block; height:0px; clear:both; visibility:hidden; } .clearfix {zoom:1;} /*=== 布局 ====*/ .user_info {width:106px; background:#EFEFEF; border:1px solid #C8CAC7; margin:50px auto; padding:5px 4px; position:relative;} .user_info img {width:106px; margin:0 auto;} .user_info p {color:#666; line-height:21px;} .user_info p strong {color:#86AE3C; font-weight:bold;} .user_info .attention {width:86px; height:18px; background:url(/wp-content/uploads/demo/opacitylayer/images/btn.png) no-repeat; line-height:9999px; display:inline-block; overflow:hidden;} .user_info .operate {width:106px; height:36px; display:none; margin:0 4px; position:absolute; top:75px; left:0; z-index:100;} .user_info .operate a {color:#fff; text-decoration:none; display:block;} .user_info .operate a:hover {color:#fff; text-decoration:underline;} .user_info .operate strong {position:relative; display:block; z-index:100;} .user_info .operate .opacityLayer {width:106px; height:36px; background:#000; position:absolute; top:0; left:0; z-index:10; filter:alpha(opacity=50); -ms-filter:"alpha(opacity=50)"; -moz-opacity:0.5; -khtml-opacity: 0.5; opacity:0.5;} </style> </head> <body> <div class="user_info" onmouseout="closeVessel('operate');" onmouseover="openVessel('operate');"> <a href="#"><img alt="" src="/wp-content/uploads/demo/opacitylayer/images/pic.jpg" /></a> <p><strong>1234</strong>人关注</p> <p><a class="attention" href="#">关注</a></p> <div id="operate" class="operate" onmouseout="closeVessel('operate');"> <strong><a href="#">TA申请的学校</a><a href="#">TA获得的offer</a></strong> <div class="opacityLayer"></div> </div> </div> <script type="text/javascript"> function openVessel(strId) { document.getElementById(strId).style.display = "block"; } function closeVessel(strId) { document.getElementById(strId).style.display = "none"; } </script> </body> </html>

提示：你可以先修改部分代码再运行。

==============================================

后记：

其实这篇东西是在一个月之前的，写到一半没有完成就这样放在草稿箱里一个月过去了。。。今天整理后台的时候才发现，赶紧发出来，真是惭愧。。。

发表评论 | Trackback

江西人事考试网

2011年10月26日09:53

回复 | 引用 | #1

不错可以学习一下
内蒙古人事考试信息网

2011年9月20日15:23

回复 | 引用 | #2

晕了晕了，最不适合代码了、
西安彩钢

2011年9月1日14:16

回复 | 引用 | #3

赞一个，走人！
John

2011年3月20日08:46

回复 | 引用 | #4

这个很强，学习了。加油。
老人保健品

2011年2月23日19:33

回复 | 引用 | #5

学习中，感谢博主
戒烟产品

2011年1月9日06:17

回复 | 引用 | #6

画面画的好丑啊
yktd

2010年12月28日11:38

回复 | 引用 | #7

写主要就是为了兼容该死的ie6
LinYin

2010年12月23日13:04

回复 | 引用 | #8

很实用很炫啊！不知道在IE6下是否支持。
- hzhjun
  
  2010年12月23日13:38
  
  回复 | 引用 | #9
  
  这样写主要就是为了兼容该死的ie6！
爱琴海

2010年12月10日10:50

回复 | 引用 | #10

这个貌似有点不懂了。
赛尔号在线

2010年12月1日00:17

回复 | 引用 | #11

看看学习学习了·
八斗文档网

2010年11月30日17:27

回复 | 引用 | #12

实战效果啊！
学夫子

2010年11月30日13:37

回复 | 引用 | #13

这个似乎拿来作为广告展示还是很不错的
唐人游博客活动

2010年11月30日09:30

回复 | 引用 | #14

尊厉害，先收藏下，我改天根据教程来实战下

邀请你参加一个针对wordpress主题的博主有奖征文活动，欢迎您参加！

具体的活动地址详见：http://happy.uc55.com/www/bloger/
修远兮

2010年11月28日21:28

回复 | 引用 | #15

JS的就不会了，JQ写出这个效果倒是不难。
淘宝网女鞋

2010年10月13日15:20

回复 | 引用 | #16

效果不错，不懂javascript!
祛痘产品排行榜

2010年9月24日23:10

回复 | 引用 | #17

关注一下。。。。。。。。。。。。。。。。。。。
Abercrombie UK

2010年9月20日16:45

回复 | 引用 | #18

博主好厉害。。。
阿修罗

2010年9月8日19:37

回复 | 引用 | #19

好实战，有劲够味！