JS: 背景虚化，内容聚焦 -

michaelhqs

浏览: 17362 次

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JS: 背景虚化，内容聚焦

博客分类：

html
javascript

javascript js

    最近在做一个公司内部网站，申明一下，公司为非互联网公司，因此网站纯为内部信息共享，方便新闻发布。开发也是十分的“山寨”，没有专业人员，没有基础平台，一切从零开始，一切从三个“臭皮匠”开始：一个皮匠负责后台，一个负责UI，一个负责前台代码。我是其中负责前台的皮匠。初用javascript，存在很多的不足，性能没有考虑，功能放在了第一位。

    第一个功能，页面聚焦。初始页面中分布很多小版块，当用户点击版块时，显示该版块详细内容，同时，页面其余部分模糊化。

    考虑到页面需要模糊化，并且在点击任何部分的时候都需要这个功能，因此将页面主体部分放到一个div id="container"中，点击其中版块，通过js将改div的透明度进行更改。同时，点击后出现的详细内容放入一个div id="artcon“ 中，并将该div置于 id="container"之外：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

body{text-align: center;}

#container {width:888px; position:relative; margin-right: auto; margin-left: auto; }

#artcon{width:888px; position:relative; margin-right: auto; margin-left: auto;}
#articleCon{
position:absolute;
background: #fff;
top:30px;
left:0px;
z-index:3;
height:300px;
width: 888px;
border: 1px solid;
border-color: #aaa;
display:none;
margin:0px 0px 0px 0px;
}

</style>

</head>

<body bgcolor="#eeeeee">
<script type="text/javascript">

var POP_LOCK = "unlock";
var $focus_area = "";
var $last_focus = "";

function hideMenu(){

   var container = document.getElementById("container");

container.style.opacity = "0.3";
   }

   function uhideMenu(){

   var container = document.getElementById("container");
container.style.opacity = "1";
   }

function show_article(obj){
hideMenu();
POP_LOCK = "lock";
document.getElementById("articleCon").style.display="block";

}

function unshow_article(obj){
   //alert("we are in articlePopdown");
   uhideMenu();

   document.getElementById("articleCon").style.display="none";

   POP_LOCK = "unlock";
   }

</script>

<div id="container" >

<div onclick="show_article(this)"> Click me to show the details </div>

</div>
</div>

<div id="artcon">
<div id="articleCon" >

<div style="align:right; margin-right: 10px; border: 1px;" align="right" onClick="unshow_article(this)">
            Click me to hide me!
        </div>


       <hr width="850px" align="center" style="height:1px;border:0;border-bottom:1px solid #aaa;">

</div>
</div>

</body>

</html>

(代码为手写，非引用。)

分享到：