javascript

位置:IT落伍者 >> javascript >> 浏览文章

简单介绍CSS结合JS的运用


发布日期:2023年08月27日
 
简单介绍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=thisclassName=over onMouseOut=thisclassName=out意思为当鼠标经过时图片为over样式即彩色正常图象当鼠标离开时图片为out样式即黑白图象oMouseOver和onMouseOut是鼠标事件thisclassName=表示当前对象的class名为…注意大小写不要写错JS对大小写非常敏感

这样这个效果就完成了保存后在浏览器里打开图象是黑白的当鼠标移上去时图象变成彩色鼠标离开时图象又变回黑白只要发挥你的想象通过thisclassName方法还可以做出很多好看的鼠标效果

到这里所有教程的内容就都讲完了希望大家在学习中能灵活运用属性及方法深刻理解规律和概念

上一篇:JavaScript处理事件:单击事件onClick

下一篇:详解AJAX核心中的XMLHttpRequest对象