DHTML效果

1.折叠菜单

用的方法比较笨拙，但是贵在有效，不绕圈子，一看就懂。

我已经在演示中加上了很详尽的注解，直接看Demo吧。

另外以后我还想给这个实例加上其他的效果：

（1）.更换页面能保存浏览状态状态。这个在蓝色理想我看到了一些思路：

形式1（菜单有刷新页面事件）、分二种方式。
  方式1、客户端判断获得值（地址栏值）让菜单在打开时显示。
  方式2、服务端判断获得值（地址栏值）让菜单在打开时显示。
形式2（菜单无刷新页面事件）、分二种方式
  方式1、编写程序语言在js语言中。
  方式2、框架。

（2）.无极限的菜单折叠菜单。

这两个效果貌似蛮复杂的样子，以后在研究研究，这里MARK下。

 

2.对联广告

Demo

 

3.兼容IE6的顶部固定效果（无闪烁）

此效果主要是针对IE不支持position不支持fixed而设置替代属性

方式一：Demo

针对IE6使用Hack：

_position: absolute;

 _top: expression(documentElement.scrollTop + "px");

另外为了保持拖动滚动条时无闪烁效果，针对IE6添加

body { background-image: url(http://global.tianya.cn/global/gnav/css/nothing.txt);

           background-attachment: fixed; /* prevent screen flash in IE6 */

}

说明下：body背景图片的这个url可以是任何东西,只要保证url的地址不出错误,把url设置为url(http:///)应该也可以;

http://bbs.blueidea.com/thread-2916893-1-1.html有关于此方法的更多讨论。

方式二：Demo

使用纯CSS解决IE6

针对IE6使用以下代码：

html{_height:100%;_overflow:hidden;}

body{_height:100%;_overflow:auto;}

然后将需要固定的元素设置position:absolute;即可。

详细：http://www.cssass.com/blog/index.php/2008/19.html

 

4。文本内容的滚动（CSS clip属性）

Demo

cilp属性参考链接：http://www.w3school.com.cn/css/pr_pos_clip.asp

• clip 属性剪裁绝对定位元素。
• 这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。
• 设置元素的top不断减小是为了保证裁剪后的内容保持固定位置不变。