深山老林

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-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;
}
----------------------------------------------------------

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

最终效果

2006-04-24[原]用属性选择符来解决IE跟FF的兼容性问题

从之前写过的《[原]属性选择符的使用》中发现了一个可以用来解决IE跟FF兼容性的问题，因为IE不支持CSS的属性选择符。下面来看看可以怎么做：

---------------------------HTML-------------------------------------
<div class="left">
  <dl>
   <dd>dd1</dd>
   <dd>dd2</dd>
   <dd>dd3</dd>
  </dl>
</div>
<div class="right">
  <dl>
   <dd>dd4</dd>
   <dd>dd5</dd>
   <dd>dd6</dd>
  </dl>
</div>
--------------------------------------------------------------------

---------------------------CSS-------------------------------------
/*IE*/
div{width:200px;height:300px;float:left;}
.left{color:Aqua;}
.right{color:Fuchsia;}

/*FF*/
div[class=left]{color:Blue;}
div[class=right]{color:Gray;}
--------------------------------------------------------------------

从上面的例子可以看到，在IE中二个层里的文字颜色跟在FF中的文字颜色是不一样的，也就是说可以使用属性选择符来来写针对FF的样式。

可能你会说用!important声明提高样式的优先级不就完了吗，用属性选择符来为FF写样式意义不大。使用!important声明的确是比较方便，但IE6也认识这个声明，也就是说如果你给FF写了!important声明，那就得再为IE写一个样式来还原默认值，才能让IE6也显示正常。使用属性选择符就不会有这样的问题，而且可以将多个定义写到一起，是不是比较方便呢？看看下面的样式：

---------------------------使用声明----------------------------------
div.try{
  width:200px !important;
   width:204px;
  height:300px !important;
   height:304px;
   padding:2px;
}
--------------------------------------------------------------------

---------------------------使用属性选择符----------------------------
div.try{
   width:204px;
   height:304px;
   padding:2px;
}
div[class=try]{
   width:200px;
   height:300px;
}
--------------------------------------------------------------------

这里的属性选择符最好不要使用ID为属性。在《[原] CSS样式的优先级补遗2》及《[原]属性选择符的优先级》中我们了解到，ID选择符的特性值为100，而属性选择符的特性值为11，即不能达到将样式定义分开的目的。

2006-04-24[原]属性选择符的优先级

大家都知道样式定义存在优先级的问题，像“ID选择符”的优先级就比“样式选择符”要高等等。在写完《[原]属性选择符的使用》和《[原] CSS样式的优先级补遗2》后才发现，原来属性选择符的优先级是比较特殊的，看看下面的例子：

------------------------------CSS-----------------------------------
/*IE*/
div{float:left;color:Orange;} 特性值为：1
.left{color:Aqua;} 特性值为：10
div div.right{color:Fuchsia;} 特性值为：12

/*FF*/
div[title=left]{color:Blue;}
div[title=right]{color:Gray;}
--------------------------------------------------------------------

----------------------------HTML------------------------------------
<div>
  <div class="left" title="left">
    <dl>
     <dd>dd1</dd>
     <dd>dd2</dd>
     <dd>dd3</dd>
    </dl>
  </div>
  <div class="right" title="right">
    <dl>
      <dd>dd4</dd>
      <dd>dd5</dd>
      <dd>dd6</dd>
    </dl>
  </div>
</div>
--------------------------------------------------------------------

在FF中可以看到，第一个层里的文字是蓝色的，而第二个层里的粉红色的。所以不难得出，属性选择符的特性值是在10到12之间，姑且写为11吧，以方便表示。