简单介绍CSS结合JS的运用
利用CSS配合Javascript的可以做很多更酷的动态页面效果 在本教程的最后给大家简单介绍一下CSS配合JS的应用 首先 我们要搞清楚事件和动作的概念 在客户端脚本中 JavaScript 通过对事件进行响应来获得与用户的交互 例如 当用户单击一个按钮或者在某段文字上移动鼠标时 就触发了一个单击事件或鼠标移动事件 通过对这些事件的响应 可以完成特定的功能（例如 单击按钮弹出对话框 鼠标移动到文本上后文本变色等） 下面介绍几种常见的事件（还用更多事件 请查阅相关资料）
onClick 鼠标单击事件 （是指鼠标按下 然后松开时产生 ）
onDblClick 鼠标双击事件 （是指鼠标快速按下 松开 并再次按下时产生 ）
onMouseDown 鼠标按下事件 （鼠标按下时即产生 ）
onMouseUp 鼠标释放事件 （是指鼠标从按下的状态到弹起 ）
onMouseMove 鼠标移动事件 （是指在特定元素上移动鼠标 ） onMouseOver 鼠标经过事件 （是指 当指针从外界往元素上移动时产生 ）
onMouseOut 鼠标离开事件 （是指鼠标从特定元素上离开时产生 ）
onLoad 载入事件 （当图象或页面结束载入时产生 ）
onUnload 卸载事件 （当访问者离开页面时产生 ）
onScroll 滚动条滚动事件 （当访问者使用卷轴上移或下移时产生 ）
有了事件以后 我们就为事件加上动作 这里只说改变当前元素自定义样式的动作 我们可以用这个方法先设定好两个自定义的CSS样式 对象原先调用第一种样式 当产生鼠标事件时让对象应用到第二种CSS样式 而产生的鼠标效果 看下面这个例子
在网页中插入一个图象 自定义一个 out 样式 用gray滤镜使图片变成黑白的
将这个自定义样式应用到图片上 在浏览器中预览到图片变成了黑白 我们再定义一个样式 over 这个样式没有任何内容 是空样式 样式表代码如下
<style type= text/css >
<!
over {}
out {filter: Gray}
>
</style>
然后在图片标记（IMG）里加上 onMouseOver= this className= over onMouseOut= this className= out 意思为当鼠标经过时 图片为over样式 即彩色正常图象 当鼠标离开时 图片为out样式 即黑白图象 oMouseOver和onMouseOut是鼠标事件 this className= … 表示当前对象的class名为… 注意大小写不要写错 JS对大小写非常敏感
这样这个效果就完成了 保存后在浏览器里打开 图象是黑白的 当鼠标移上去时 图象变成彩色 鼠标离开时 图象又变回黑白 只要发挥你的想象 通过this className方法还可以做出很多好看的鼠标效果
lishixinzhi/Article/program/Java/JSP/201311/19145
