2007-12-05
DHTML 笔记
DHTML 不是 W3C 标准。
DHTML 结合 CSS 和 JavaScript。
元素必须指定位置属性（relative相对 或者 absolute绝对）。
然后设置下面的属性：
left - the element's left position
top - the element's top position
visibility - specifies whether an element should be visible or hidden
z-index - the element's stack order
clip - element clipping
overflow - how overflow contents are handled
position:relative 指定元素的位置相对于当前元素。
position:absolute 指定元素的位置距离窗口页边。
visibility:visible 元素可见。
visibility:hidden 元素隐藏。
z-index 相当于三维坐标系中的 Z 轴。
滤镜（过滤器？^_^）
使用滤镜时应该总是指定 width 属性。
h1
{
width:100%;
filter:glow;
}
如果 background-color 属性不被设置成 transparent（透明）， 一些滤镜的属性将不能工作。
background-attachment:scroll 页面空闲时滚动。
background-attachment:fixed 页面空闲时固定。
DOM 文档对象模型
事件处理
DHTML 结合 CSS 和 JavaScript。
元素必须指定位置属性（relative相对 或者 absolute绝对）。
然后设置下面的属性：
left - the element's left position
top - the element's top position
visibility - specifies whether an element should be visible or hidden
z-index - the element's stack order
clip - element clipping
overflow - how overflow contents are handled
position:relative 指定元素的位置相对于当前元素。
position:absolute 指定元素的位置距离窗口页边。
visibility:visible 元素可见。
visibility:hidden 元素隐藏。
z-index 相当于三维坐标系中的 Z 轴。
滤镜（过滤器？^_^）
使用滤镜时应该总是指定 width 属性。
h1
{
width:100%;
filter:glow;
}
如果 background-color 属性不被设置成 transparent（透明）， 一些滤镜的属性将不能工作。
| Property | Argument | Description | Example |
|---|---|---|---|
| alpha | opacity finishopacity style startx starty finishx finishy |
Allows you to set the opacity of the element | filter:alpha(opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270) |
| blur | add direction strength |
Makes the element blur | filter:blur(add=true, direction=90, strength=6); |
| chroma | color | Makes the specified color transparent | filter:chroma(color=#ff0000) |
| fliph | none | Flips the element horizontally | filter:fliph; |
| flipv | none | Flips the element vertically | filter:flipv; |
| glow | color strength |
Makes the element glow | filter:glow(color=#ff0000, strength=5); |
| gray | none | Renders the element in black and white | filter:gray; |
| invert | none | Renders the element in its reverse color and brightness values | filter:invert; |
| mask | color | Renders the element with the specified background color, and transparent foreground color | filter:mask(color=#ff0000); |
| shadow | color direction |
Renders the element with a shadow | filter:shadow(color=#ff0000, direction=90); |
| dropshadow | color offx offy positive |
Renders the element with a dropshadow | filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true); |
| wave | add freq lightstrength phase strength |
Renders the element like a wave | filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5) |
| xray | none | Renders the element in black and white with reverse color and brightness values | filter:xray; |
background-attachment:scroll 页面空闲时滚动。
background-attachment:fixed 页面空闲时固定。
DOM 文档对象模型
事件处理
| Event | Occurs when... |
|---|---|
| onabort | a user aborts page loading |
| onblur | a user leaves an object |
| onchange | a user changes the value of an object |
| onclick | a user clicks on an object |
| ondblclick | a user double-clicks on an object |
| onfocus | a user makes an object active |
| onkeydown | a keyboard key is on its way down |
| onkeypress | a keyboard key is pressed |
| onkeyup | a keyboard key is released |
| onload | a page is finished loading. Note: In Netscape this event occurs during the loading of a page! |
| onmousedown | a user presses a mouse-button |
| onmousemove | a cursor moves on an object |
| onmouseover | a cursor moves over an object |
| onmouseout | a cursor moves off an object |
| onmouseup | a user releases a mouse-button |
| onreset | a user resets a form |
| onselect | a user selects content on a page |
| onsubmit | a user submits a form |
| onunload | a user closes a page |
- 17:36
- 浏览 (128)
- 评论 (0)
- 分类: ML & Script & Style & Other...
- 相关推荐
评论排行榜