Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 js 可伸缩网页内容展示效果

js 可伸缩网页内容展示效果

发布时间:2017-10-25   编辑:www.jquerycn.cn
jquery中文网为您提供js 可伸缩网页内容展示效果等资源,欢迎您收藏本站,我们将为您提供最新的js 可伸缩网页内容展示效果资源
提示:您可以先修改部分代码再运行
<textarea name="runcool" id="runcool" rows="28" cols="75" > <html xmlns="http://www.jquerycn.cn/1999/xhtml"> <head> <title>漂亮实用的可伸缩网页内容展示效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{ margin:30px auto; } ul{ list-style:none; } #faq{ font-size:12px; width:800px; } #faq li{ margin:0 0 10px; padding:0 0 5px; } #faq dl{ margin:0; padding:0; display:inline; } #faq dt{ font-weight:bold; cursor:pointer; line-height:20px; padding:0 0 5px 22px; background:url/images/arrow_up.gif) no-repeat 0px 2px; border-bottom:1px #ccc dotted; } #faq dd{ display:none; margin:0; padding:5px 0 5px 20px; background:#E5ECF9; line-height:180%; } </style> <script type="text/javascript"> var lastFaqClick=null;//上次点击的faq window.onload=function(){ var faq=document.getElementById("faq"); var dls=faq.getElementsByTagName("dl"); for (var i=0,dl;dl=dls[i];i ){ var dt=dl.getElementsByTagName("dt")[0];//取得标题 dt.id = "faq_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; } } } /** *取得元素的真实css属性 *written in 06.7 sheneyan */ function gs(d,a){ if (d.currentStyle){ var curVal=d.currentStyle[a] }else{ var curVal=document.defaultView.getComputedStyle(d, null)[a] } return curVal; } </script> <ul id="faq"> <li>
IE6的双倍间距问题,该怎么办?
引发原因:对元素使用了浮动float后,并且使用了margin-left或者margin-right,在IE6中往往会容易引发双倍间距的问题。
解决方法:对使用浮动float的元素多添加一个display:inline;即可,当然也可以麻烦点,使用针对IE6的hack,减少margin-left和margin-right的数值(一半)。
</li> <li>
为什么IE6中使用PNG图片的时候,背景是灰的,而其他浏览器却是透明的?
引发原因:因为IE6对PNG-24格式的图片支持的不是很好,尤其是带alpha通道的图片。
解决方法:
1) 不使用带alpha通道的png-24格式的图片,而使用png-8格式的图片。
2) 对于一定要使用alpha透明的图片的话,可以用flash,也可以用其他方法,具体请查看gulu77整理的《IE6支持PNG透明(alpha通道)的4种方法》。
</li> <li>
为什么页面很乱,下面的内容都跑到上面来了呢?
引发原因:当一个元素浮动后,就会让该元素旁边的以及下面的元素都产生位置的变化。
解决方法:清除该元素的浮动。
</li> <li>
为什么高度不会自适应呢?
引发原因:当一个元素浮动以后,或者是没有设置高度的时候,往往会出现高度无法自适应的情况。
解决方法:如果高度没有设置或者是设置了height:auto;的话,那么可以使用overflow:hidden;来达到高度自适应的方法。
</li> <li>
div中的内容被FLASH挡住了?
引发原因:FLASH在页面中的级别相对来说比其他元素都要高,就算设置了position后并且带有z-index也还是会出现这样的问题。
解决方法:记得以前解决这个方法的时候是使用iframe这个更搞级别的标签元素来解决的,不过后来发现了另外一个方法,就是给FLASH设置透明就可以了。可以参考《标准的FLASH插入代码》一文,这个是当初在PR的博客上看到的。
</li> <li>
如何隐藏文字(一般用特殊的漂亮的背景图片替代)?
以下的代码只是简要说明一下如何隐藏一个文字,具体的使用方法大家可以根据自己需要来使用,基本上都是利用让文字超出边界然后overflow:hidden;来实现,当然是在块元素内才可以(程序代码:<h3>这个文字我想隐藏的,怎么办</h3>)。

A、添加标签,隐藏标签内容
<h3><span style="display:none;">那就多添加一个标签,然后display:none不就隐藏了么</span></h3>

B、text-indent:-9999px;利用text-indent将文字推出块区域
<h3 style="width:200px;text-indent:-9999px;overflow:hidden;">文字被推出去了哦</h3>

C、利用行高来隐藏文字
<h3 style="width:200px;height:25px;overflow:hidden;line-height:250px;font-size:0;content:'';">文字是不是又不见了啊,嘻嘻</h3>

D、利用背景色来隐藏文字
<h3 style="color:#FFFFFF;backgroud-color:#FFFFFF">文字跟背景色相同,那就看不到了,不过好像没什么实际性的意义</h3>

E、利用其他模块来隐藏文字
<h3 style="width:200px;height:25px;">这个是标题</h3>

利用margin-top负边距来将内容区域提升上去覆盖标题区域,然后用padding-top来实现原有的标题区域的范围,可以用背景图片来做得更漂亮点,但具体的要结合实际情况来实现

</li> </ul> </body> </html></textarea>
提示:您可以先修改部分代码再运行

您可能感兴趣的文章:
js展开收缩层的效果
css3中flexbox伸缩盒深入理解
jQuery 表格展开伸缩的示例代码
iis中不能开启Gzip压缩的问题
PHP开启gzip压缩的二种方法
在IIS中启用gzip压缩
(图文)IIS6.0压缩配置
CSS3中flexbox布局效果代码
iis中启用页面HTTP压缩(页面Gzip压缩)
IIS压缩及性能优化

[关闭]