4顶

js图层伸缩显示特效

稿源：互联网 2022-04-02 21:40:59 点击： 3144 撤稿纠错

点击标题时展开图层内容，常见于问题页面点击标题显示答案效果。

以下讨论的是和伸缩相关的js图层伸缩显示特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>网页特效 漂亮实用图层内容伸缩展示特效 站长特效网</title>
<style type="text/css">
body{
 margin:30px auto;
}
ul{
 list-style:none;
}
#zzjs_net{
 font-size:12px;
 width:800px;
}
#zzjs_net li{
 margin:0 0 10px;
 padding:0 0 5px;
}
#zzjs_net dl{
 margin:0;
 padding:0;
 display:inline;
}
#zzjs_net dt{
 font-weight:bold;
 cursor:pointer;
 line-height:20px;
 padding:0 0 5px 22px;
 border-bottom:1px #ccc dotted;
}
#zzjs_net dd{
 display:none;
 margin:0;
 padding:5px 0 5px 20px;
 background:#E5ECF9;
 line-height:180%;
}
</style>
<script type="text/javascript">
var lastFaqClick=null;//上次点击的zzjs_net
window.onload=function(){
  var zzjs_net=document.getElementById("zzjs_net");
  var dls=zzjs_net.getElementsByTagName("dl");
  for (var i=0,dl;dl=dls[i];i++){
    var dt=dl.getElementsByTagName("dt")[0];//取得标题
     dt.id = "zzjs_net_dt_"+(Math.random()*100);
     dt.onclick=function(){
       var p=this.parentNode;//取得父节点
        if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
          var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
          for (var i=0,dd;dd=dds[i];i++)
            dd.style.display='none';
        }
        lastFaqClick=this;
        var dds=p.getElementsByTagName("dd");//取得该父节点所有的子节点，也就是所有的答案
        var tmpDisplay='none';
        if (gs(dds[0],'display')=='none')
          tmpDisplay='block';
        for (var i=0;i<dds.length;i++)
          dds[i].style.display=tmpDisplay;
      }
  }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
/**
*取得元素的真实css属性
*/
function gs(d,a){
  if (d.currentStyle){
    var curVal=d.currentStyle[a]
  }else{
    var curVal=document.defaultView.getComputedStyle(d, null)[a]
  }
  return curVal;
}
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

<ul id="zzjs_net">
  <li>
    <dl>
      <dt>IE6的双倍间距问题，该怎么办？</dt>
      <dd><strong>引发原因：</strong>对元素使用了浮动float后，并且使用了margin-left或者margin-right，在IE6中往往会容易引发双倍间距的问题。<br/>
        <strong>解决方法：</strong>对使用浮动float的元素多添加一个display:inline;即可，当然也可以麻烦点，使用针对IE6的hack，减少margin-left和margin-right的数值（一半）。</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>为什么IE6中使用PNG图片的时候，背景是灰的，而其他浏览器却是透明的？</dt>
      <dd><strong>引发原因：</strong>因为IE6对PNG-24格式的图片支持的不是很好，尤其是带alpha通道的图片。<br>
        <strong>解决方法：</strong><br>
        1) 不使用带alpha通道的png-24格式的图片，而使用png-8格式的图片。<br>
        2) 对于一定要使用alpha透明的图片的话，可以用flash，也可以用其他方法，具体请查看gulu77整理的《IE6支持PNG透明(alpha通道)的4种方法》。 </dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>为什么页面很乱，下面的内容都跑到上面来了呢？</dt>
      <dd><strong>引发原因：</strong>当一个元素浮动后，就会让该元素旁边的以及下面的元素都产生位置的变化。<br>
        <strong>解决方法：</strong>清除该元素的浮动。</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>为什么高度不会自适应呢？</dt>
      <dd><strong>引发原因：</strong>当一个元素浮动以后，或者是没有设置高度的时候，往往会出现高度无法自适应的情况。<br>
        <strong>解决方法：</strong>如果高度没有设置或者是设置了height:auto;的话，那么可以使用overflow:hidden;来达到高度自适应的方法。</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>div中的内容被FLASH挡住了？</dt>
      <dd><strong>引发原因：</strong>FLASH在页面中的级别相对来说比其他元素都要高，就算设置了position后并且带有z-index也还是会出现这样的问题。<br>
        <strong>解决方法：</strong>记得以前解决这个方法的时候是使用iframe这个更搞级别的标签元素来解决的，不过后来发现了另外一个方法，就是给FLASH设置透明就可以了。可以参考《标准的FLASH插入代码》一文，这个是当初在PR的博客上看到的。</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>如何隐藏文字（一般用特殊的漂亮的背景图片替代）？</dt>
      <dd>以下的代码只是简要说明一下如何隐藏一个文字，具体的使用方法大家可以根据自己需要来使用，基本上都是利用让文字超出边界然后overflow:hidden;来实现，当然是在块元素内才可以（程序代码：<h3>这个文字我想隐藏的，怎么办</h3>）。<br>
        <p><strong>A、添加标签，隐藏标签内容</strong><br>
          <h3><span style="display:none;">那就多添加一个标签，然后display:none不就隐藏了么</span></h3></p>
        <p><strong>B、text-indent:-9999px;利用text-indent将文字推出块区域</strong><br>
          <h3 style="width:200px;text-indent:-9999px;overflow:hidden;">文字被推出去了哦</h3></p>
        <p><strong>C、利用行高来隐藏文字</strong><br>
          <h3 style="width:200px;height:25px;overflow:hidden;line-height:250px;font-size:0;content:'';">文字是不是又不见了啊，嘻嘻</h3></p>
        <p><strong>D、利用背景色来隐藏文字</strong><br>
          <h3 style="color:#FFFFFF;backgroud-color:#FFFFFF">文字跟背景色相同，那就看不到了，不过好像没什么实际性的意义</h3></p>
        <p><strong>E、利用其他模块来隐藏文字</strong><br>
          <h3 style="width:200px;height:25px;">这个是标题</h3><br>
          <div style="width:200px;height:300px;margin-top:-25px;padding-top:25px;background-color:#FFFFFF">利用margin-top负边距来将内容区域提升上去覆盖标题区域，然后用padding-top来实现原有的标题区域的范围，可以用背景图片来做得更漂亮点，但具体的要结合实际情况来实现</div></p>
      </dd>
    </dl>
  </li>
</ul>
</body>
</html>

关于js图层伸缩显示特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010123066670.shtml方便下次再访问哦。

·上一篇： 兼容各种浏览器js折叠菜单
·下一篇： 点击链接展开和关闭图层

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

js图层伸缩显示特效

文章分类LIST >>返回首页

最新游戏

最新新闻