深山老林

2006-05-29[原]显示或隐藏层的JS函数

/*
========================
函数：显示或隐藏层
showDiv(divId_array,showLocality_array)
参数说明：
divId_array 所有要操作的层ID，用逗号分隔
showLocality_array 所有要显示的层在参数DivIdArray所对应的位置。为“0”或空时全部显示，设为负数则全部隐藏。
例如：showDiv('div3,div1,div2','2,3')为显示第二个(div1)和第三个层(div2)，第一个层(div3)将被隐藏。
========================
*/
function showDiv(divId_array,showLocality_array)
{
 var div_array = new Array();
 var locality_array = new Array();
 var intLocality;//showLocality_array数组长度
 var intDiv;//div_array 数组长度
 var intTemp = 1;//临时变量
 var intTmp = 1;//临时变量
 
 //初始化
 if (divId_array)
 {
  div_array = divId_array.split(",");
 }else{
  intDiv = 0;
 }
 if (showLocality_array)
 {
  locality_array = showLocality_array.split(",");
  intLocality = locality_array.length;

  for (var n = 0;n < intLocality;n++)
  {
   intTemp *= locality_array[n];
   
  }
  if (intTemp <= 0)
  {
   intLocality = intTemp;
  }else{
   intLocality = div_array.length;

  while (intLocality > 0)
  {
   intLocality -= 1;
   document.getElementById(""+ div_array[intLocality] +"").style.display = "none";
  }
   intLocality = 1;
  }
 }else{
  intLocality = 0;
 }

 //显示指定层
 if (intDiv != 0 && intLocality >0)
 {
  intDiv = div_array.length;
  intLocality = locality_array.length;
  
  //排序locality_array 数组
  for (var n = 0;n < intLocality;n++)
  {
   intTemp = locality_array[n];
   
   for (var m = n + 1;m < intLocality;m++)
   {
    if (locality_array[n] > locality_array[m])
    {
     locality_array[n] = locality_array[m];
     locality_array[m] = intTemp;
     intTemp = locality_array[n];
    }
   }
  }
  
  intLocality = locality_array.length;
  intTemp = 0;
  
  //
  while (intTemp < intLocality)
  {
   if ((locality_array[intTemp] - 1) < div_array.length)
   {
    intTmp = locality_array[intTemp] - 1;
    document.getElementById(""+ div_array[intTmp] +"").style.display = "block";
   }
   
   intTemp += 1;
  }
 }
 else if(intLocality == 0)
 {//显示所有层
  intLocality = div_array.length;

  while (intLocality > 0)
  {
   intLocality -= 1;
   document.getElementById(""+ div_array[intLocality] +"").style.display = "block";
  }
 }else{//隐藏所有层
  intLocality = div_array.length;

  while (intLocality > 0)
  {
   intLocality -= 1;
   document.getElementById(""+ div_array[intLocality] +"").style.display = "none";
  }
 }
}

2006-05-22小小的感想

学了几天互交设计，发现这东东还是很有意思的，有点像做导游，现在在哪、要做什么、去哪……让用户在不知觉中进“黑店”，买点“记念品”。

跟开始接触Web标准一样，主要要面对的还是思想上的转变问题，新事物总是有新的思维方式，很多的为什么，可是已经不是接受新事物那么简单了，更多的是要放弃原本已经根深的思维方式，甚至得要有“认错”的勇气，当别人问得你无语时，是生气？堵气？还是接受？

可最大的问题还是“无知”，虽然知道这是种新东西，不知才要学嘛，可是新东西不一定就是好的，在无法分辨“好坏”的情况下，是否要接受？我觉得这才是个最大的考验。在学Web标准是时候也是，一开始就被那些所谓的“高手”引到了“DIV+CSS”的路上，结果很多人都错误的以为Web标准就是用DIV布局去替代表格布局，结果页面从一堆表格标签换成了一堆DIV标签，页面变得更难维护。

知比不知好，但一知半解还不如不知好。

2006-05-16[转]DMMT样章——第一章 别让我思考

De Dream', Windy(http://www.DeDream.com)，2005年12月，翻译稿样

注：本书是DMMT第二版，将由机械工业出版社在2006年1月出版，这是第一章的翻译稿。

第一章 别让我思考
――Krug可用性第一定律

Michael，窗帘怎么打开了？
Kay Corleone，教父第二部

人们经常问我：
“如果我想保证网站容易使用，那么最重要的是什么？”

答案很简单，不是“重要的内容要放在两次点击之内”，或者“采用用户的语言”，甚至也不是“保持一致”。

而是……

别让我思考

多年以来，我一直在跟人们说，这是我的可用性第一定律。看过的网页越多，我就越坚信这一点。

这是最最重要的原则――它是在Web设计中，判别什么有用什么没用的终极法则。如果你只能记住一条可用性原则，那么就记住这一条 。

它意味着，设计者应该尽量做到，当我看一个页面时，它应该是不言而喻，一目了然，自我解释的。

我应该能明白它――它是什么意思，怎样用它――而不需要进行额外的思考。

不过，我们说的到底有多不言而喻？

呃，充分的不言而喻，就好象，你隔壁的邻居，她对你的网站主题毫无兴趣，也几乎不知道使用后退按钮，但她仍然可以看一眼你的主页，然后说，“噢，这是____。”（如果运气好的话，她会说：“噢，这是____。真是太好了！”当然，这是另外一回事了。）

这样来看：
当我看到一个不需要思考的网页时，脑袋里面浮现的会是：“嗯，这是____，那是____，我想要的东西在这里。”

图P12
这看起来象产品目录……
内存（Memory），Modem，啊，找到了，显示器（Monitor）。点击。
……这些是今天的促销产品。
当我看到一个需要思考的网页时，脑袋里面浮现的东西都会加上一个问号：

图P13
嗯，相当凌乱。我该从哪里开始？
为什么他们把它叫作这个？
我可以点这里吗？
这是导航？还是放在这里而已？
他们为什么把这个放在这里？
这两个链接看起来一样，是真的吗？

创建一个网站的时候，你要做的，就是去掉这些问号。

迫使我们思考的地方

网页上每项内容都有可能迫使我们停下来，进行不必要的思考。例如，名字。典型的罪魁祸首是那些很酷或者自以为很聪明的名字……

Windy 发表于2005年12月09日

2006-05-11[原]用CSS实现图片说明提示2

今天发呆的时候才想到，把一种更直接简单的方法给忘记了，因为这里使用了绝对定位，所以可以使用z-index属性。

------------------------HTML------------------------------
<ul>
<li class="photo1"><q>text1</q><a href="#"></a></li>
<li class="photo2"><q>text2</q><a href="#"></a></li>
</ul>
----------------------------------------------------------

看起来没什么不同，就是把说明文字提了出来，这样<a></a>的状态变化对说明文字就没影响了，不明白？来看下去吧：

-----------------------CSS---------------------------------
ul{
list-style:none;
}
ul li{
width:80px;
height:80px;
position:relative;/*用于使用下面的绝对定位有效*/
}
ul li q{
width:80px;
height:20px;
position:absolute;/*使说明文字置于底部*/
bottom:0;
left:0;
text-align:center;
font-size:12px;
color:#fff;
line-height:20px;
background-color:#31CEFF;
z-index:2;
}
ul li a{
width:80px;
height:80px;
position:absolute;/*使链接跟说明文字重叠*/
left:0;
top:0;
display:block;
}
ul li a:link, ul li a:visited, ul li a:active{
z-index:3;
}
ul li a:hover{
z-index:1;/*显示说明文字*/
}
.photo1, .photo1 a{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
.photo2, .photo2 a{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
----------------------------------------------------------

不过很可惜，在IE中还是不能正常显示。

2006-05-10[原]用CSS实现图片说明提示

在网上会看到那种当鼠标放到一张图片上就会在图上面出现一个说明文字之类的东东， 用JS来控制层的隐藏和显示，可以很容易的实现这个效果。

今天我们不是要说用JS怎么实现，而是来看看用CSS怎么实现这个效果。

首先按正常的思路：跟状态有关的就只有用链接的四个状态，当鼠标放到图上时，让说明文字显示出来，移开时隐藏，那说明的文字放在哪个位置？下面来看下HTML部分怎么写：

------------------------HTML------------------------------
<ul>
<li class="photo1"><a href="#"><q>text1</q></a></li>
<li class="photo2"><a href="#"><q>text2</q></a></li>
</ul>
----------------------------------------------------------

想要让说明文字跟鼠标状态有关联，就得将文字放到<a></a>里面，图片就当成背景放入，这样就可以让文字在图片上面出现了。下面是样式部分：

-----------------------CSS---------------------------------
ul{
list-style:none;
}
ul li{
width:80px;
height:80px;
position:relative;/*用于使用下面的绝对定位有效*/
}
ul li q{
width:80px;
height:20px;
position:absolute;/*使说明文字置于底部*/
bottom:0;
left:0;
text-align:center;
font-size:12px;
color:#fff;
line-height:20px;
background-color:#31CEFF;
}
ul li a{
width:80px;
height:80px;
position:absolute;/*使链接跟说明文字重叠*/
left:0;
top:0;
display:block;
}
ul li a:link q, ul li a:visited q, ul li a:active q{
display:none;
}
ul li a:hover q{
display:block;/*显示说明文字*/
}
.photo1{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
.photo2{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
----------------------------------------------------------

ＯＫ，现在到IE看看效果，是不是没有效果？没错，在IE里是没有效果的，我想可能是因为文字一开始就隐藏了，所以也就没有位置可以触发它显示。可是在FF中是完全没问题的哦！IE不能显示，多少还是有点可惜，不如就换个思路吧，既然先隐藏了不行，那就让它不隐藏不就行了。先改改HTML部分：

------------------------HTML------------------------------
<ul>
<li class="photo1"><q>text1</q><a href="#"></a></li>
<li class="photo2"><q>text2</q><a href="#"></a></li>
</ul>
----------------------------------------------------------

看起来没什么不同，就是把说明文字提了出来，这样<a></a>的状态变化对说明文字就没影响了，不明白？来看下去吧：

-----------------------CSS---------------------------------
ul{
list-style:none;
}
ul li{
width:80px;
height:80px;
position:relative;/*用于使用下面的绝对定位有效*/
}
ul li q{
width:80px;
height:20px;
position:absolute;/*使说明文字置于底部*/
bottom:0;
left:0;
text-align:center;
font-size:12px;
color:#fff;
line-height:20px;
background-color:#31CEFF;
}
ul li a{
width:80px;
height:80px;
position:absolute;/*使链接跟说明文字重叠*/
left:0;
top:0;
display:block;
}
ul li a:link, ul li a:visited, ul li a:active{
display:block;
}
ul li a:hover{
display:none;/*显示说明文字*/
}
.photo1, .photo1 a{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
.photo2, .photo2 a{
background:url(http://www.blogbus.com/images/news/2005/12-22/commend.gif) no-repeat left top;
}
----------------------------------------------------------

这个思路就是“三明治”，将说明文字放在两个相同图片的中间，当鼠标经过时把上面的图隐藏，就会出现说明文字，这样看起来的效果就跟说明文字出现一样了，当然这只能算是一种障眼法，当图片是透明背景时问题就会出现。

最终效果