简单介绍CSS结合JS的运用

2016-02-19 18:33 6 1 收藏

下面图老师小编要向大家介绍下简单介绍CSS结合JS的运用,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

利用CSS配合Javascript的可以做很多更酷的动态页面效果,在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先,我们要搞清楚事件和动作的概念。在客户端脚本中,JavaScript 通过对事件进行响应来获得与用户的交互。例如,当用户单击一个按钮或者在某段文字上移动鼠标时,就触发了一个单击事件或鼠标移动事件,通过对这些事件的响应,可以完成特定的功能(例如,单击按钮弹出对话框,鼠标移动到文本上后文本变色等)。

下面介绍几种常见的事件(还用更多事件,请查阅相关资料):

onClick:鼠标单击事件。(是指鼠标按下,然后松开时产生。)

onDblClick:鼠标双击事件。(是指鼠标快速按下,松开,并再次按下时产生。)

onMouseDown:鼠标按下事件。(鼠标按下时即产生。)

onMouseUp:鼠标释放事件。(是指鼠标从按下的状态到弹起。)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

onMouseMove:鼠标移动事件。(是指在特定元素上移动鼠标。)

onMouseOver:鼠标经过事件。(是指,当指针从外界往元素上移动时产生。)

onMouseOut:鼠标离开事件。(是指鼠标从特定元素上离开时产生。)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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方法还可以做出很多好看的鼠标效果。

到这里,所有教程的内容就都讲完了,希望大家在学习中能灵活运用属性及方法,深刻理解规律和概念。如对本文有疑问和意见,欢迎到www.5dmedia.com/bbs论坛讨论发言。

来源:http://www.tulaoshi.com/n/20160219/1618142.html

延伸阅读
标签: Web开发
文章导航: 第一章: 基本的圆角框 第二章:透明圆角化背景图片 第三章:圆角化图片 第四章:CSS圆角框组件 V1.0 前序: 本来前三篇文章已经将CSS圆角框讲解完毕,但从网友反馈中,都说到不好使用,因此有了这篇文章,本文主要是将前面的结果总结修订后进行JS封装,方便调用。 在本次封装中, 增加了对真正 img 标签引用的图...
标签: Web开发
今天第一次尝试使用cookie,在网上找了个例子,简单一用,基本可以满足要求。 SCRIPT type=text/javascript function Set(Cookie_name) { var Then = new Date() Then.setTime(Then.getTime() + 1*3600000 ) //小时 document.cookie = Cookie_name+"=true;expires="+ Then.toGMTString() } function ...
标签: 网站
在设计案最一开始的时候,我们习惯先跟客户讨论对方对产品的定位与感觉:稳重、可信赖、活泼、有活力、干净简洁、成熟感等等。当我们聆听到客户对产品的定位与需求,自然可以确实的选择出最适合客户的设计方向。 色彩是我们接触事物所第一个感受到的最初印象。以网页设计来说,绝大多数的网站不外乎标题、文字、图片、按钮与介面等。而当我...
标签: Web开发
这几天朋友的网站天天被搞破坏的人恶意注入,也许是程序没写好的原因,数据库每个字段加了一段script(Script Src=http://%63%2Enuclear3.com/css/c.js/Script,而这个script地址时不时的有变化)。用一些搜索引擎搜索下:/css/c.js/Script,发现好多网站居然都有这个问题。通过iis日志捕捉到注入的原型是以下形式: ;DeCLaRE @S NvArCHaR...
标签: Web开发
大概是去年的时候吧,就在网上见过了现成的CSS圆角效果的CSS及HTML代码,例如: html head titlecss圆角效果/title meta http-equiv="content-type" content="text/html; charset=gb2312" style type="text/css" div.RoundedCorner{background: #9BD1FA} b.rtop, b.rbottom{display:block;background: ...

经验教程

575

收藏

94
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部