转：简单介绍CSS结合JS的运用（针对事件动作）
星期四, 09月 25th, 2008CSS教程:简单介绍CSS结合JS的运用 利用CSS配合Javascript的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先，我们要搞清楚事件和动作的概念。在客户端脚本中，JavaScript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标时，就触发了一个单击事件或鼠标移动事件，通过对这些事件的响应，可以完成特定的功能（例如，单击按钮弹出对话框，鼠标移动到文本上后文本变色等）。 下面介绍几种常见的事件（还用更多事件，请查阅相关资料）： onClick：鼠标单击事件。（是指鼠标按下，然后松开时产生。） onDblClick：鼠标双击事件。（是指鼠标快速按下，松开，并再次按下时产生。） onMouseDown：鼠标按下事件。（鼠标按下时即产生。） onMouseUp：鼠标释放事件。（是指鼠标从按下的状态到弹起。） onMouseMove：鼠标移动事件。（是指在特定元素上移动鼠标。） onMouseOver：鼠标经过事件。（是指，当指针从外界往元素上移动时产生。） onMouseOut：鼠标离开事件。（是指鼠标从特定元素上离开时产生。） onLoad：载入事件。（当图象或页面结束载入时产生。） onUnload：卸载事件。（当访问者离开页面时产生。） onScroll：滚动条滚动事件。（当访问者使用卷轴上移或下移时产生。） 有了事件以后，我们就为事件加上动作。这里只说改变当前元素自定义样式的动作，我们可以用这个方法先设定好两个自定义的CSS样式，对象原先调用第一种样式，当产生鼠标事件时让对象应用到第二种CSS样式，而产生的鼠标效果，看下面这个例子。 在网页中插入一个图象，自定义一个“.out”样式，用gray滤镜使图片变成黑白的： 将这个自定义样式应用到图片上，在浏览器中预览到图片变成了黑白，我们再定义一个样式“.over”，这个样式没有任何内容，是空样式，样式表代码如下： 然后在图片标记（IMG）里加上“onMouseOver="this.className='over'" onMouseOut="this.className='out'"”，意思为当鼠标经过时，图片为over样式，即彩色正常图象；当鼠标离开时，图片为out样式，即黑白图象。oMouseOver和onMouseOut是鼠标事件，this.className=”…”表示当前对象的class名为…，注意大小写不要写错，JS对大小写非常敏感。 这样这个效果就完成了，保存后在浏览器里打开，图象是黑白的，当鼠标移上去时，图象变成彩色，鼠标离开时，图象又变回黑白。只要发挥你的想象，通过this.className方法还可以做出很多好看的鼠标效果。 到这里，所有css教程的内容就都讲完了，希望大家在学习中能灵活运用属性及方法，深刻理解规律和概念。 如果你能很好地应用CSS，那么你的主页将被打扮得很靓。下面就给大家介绍用CSS做出的一个鼠标单击特殊效果图。 1、将下面的代码复制到你的主页中和之间。 〈STYLE〉.shadow { FILTER: shadow(color=blue，direction=225) } .shadow1 { FILTER: shadow(color=red，direction=225) } .shadow2 { FILTER: shadow(color=green，direction=225) } .div { CURSOR: move; FILTER: blur(add=ture，direction=135，strength=10); WIDTH: 800px } 〈/STYLE〉 在这里应用的是blur滤镜。 2、在页面中插入一张图片，比如我插入是〈img border="0" src="/Files/BeyondPic/oldjcwimg/2005-11/15/0511151234155538.jpg" width="300" height="210"〉。在其前加入〈TD id=flttgt style="filter: light(enabled=1)，'width 300'" width=315〉。 在刚才我们插入图片下一行中加入〈TD style="VERTICAL-ALIGN: top" width=314〉 3、在设置了图片属性后，我们还要应用JavaScript脚本代码，也就是使图片跟随鼠标移动一些特效，代码如下。 〈SCRIPT language=JavaScript〉 〈!-- var g_numlights=0; var blurbs= new Array(" 现在的动态滤镜赋予了网页更多的交互性能来响应用户的动作。"，" 我们使用了光源滤镜来响应用户的点击。点击图片可以增加光源。"，" 通过捕捉用户鼠标位置的方法来移动光源。"，" 不需要太多的编程。"); window.onload=setlights; document.onclick=keyhandler; flttgt.onmousemove=mousehandler; function setlights(){ flttgt.filters[0].clear(); flttgt.filters[0].addcone(0，0，5，100，100，225，225，0，60，15); if (g_numlights>0){ flttgt.filters[0].addcone(400，170，5，100，100，225，0，0，160，15); if (g_numlights>1){ flttgt.filters[0].addcone(320，330，5，100，100，0，225，225，60，15); } } } function keyhandler() { g_numlights=(g_numlights+=1)%4; holder.innerHTML=blurbs[g_numlights]; setlights(); } function mousehandler() { x=(window.event.x-80); y=(window.event.y-80); flttgt.filters[0].movelight(1，x，y，5，1); if(g_numlights>0){ flttgt.filters[0].movelight(1，x，y，5，1); if(g_numlights>1) { flttgt.filters[0].movelight(2，x，y，5，1); } } } 〈/SCRIPT〉
