CSS配合JavaScript做酷的动态页面效果

2016-02-19 23:10 3 1 收藏

get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是CSS配合JavaScript做酷的动态页面效果,一起来学习了解下吧!

【 tulaoshi.com - Web开发 】

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

  下面介绍几种常见的事件:

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

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

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

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

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

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

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

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

  onLoad:载入事件。(当图象或页面结束载入时产生。)

  onUnload:卸载事件。(当访问者离开页面时产生。)

  onScroll:滚动条滚动事件。(当访问者使用卷轴上移或下移时产生。)

  有了事件以后,我们就为事件加上动作。这里只说改变当前元素自定义样式的动作,我们可以用这个方法先设定好两个自定义的CSS样式,对象原先调用第一种样式,当产生鼠标事件时让对象应用到第二种CSS样式,而产生的鼠标效果。

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

来源:https://www.tulaoshi.com/n/20160219/1629389.html

延伸阅读
标签: Web开发
第一个:  Untitled Document [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]   第二个: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
标签: Web开发
见的例子就是:一个站点上有多个页面样式提供浏览者选择。 同时,在选择了某样式后,再次打开该页面时,将仍然保持该样式。 自然会想到了Cookie技术  以下是程序代码: HTML HEAD link ID="skin" rel="stylesheet" type="text/css" TITLE换肤技术/TITLE SCRIPT LANGUAGE=javascript !-- function SetC...
标签: PHP
  WAP(无线通讯协议)是在数字移动电话、个人手持设备(PDA等)及计算机之间进行通讯的开放性全球标准。由于静态的WAP页面在很多方面不能满足用户个性化的服务请求,因此通过WAP服务器端语言产生动态的WML页面,具有很广泛的应用价值和很高的商业价值。 WAP应用结构非常类似于Internet, 一个典型的WAP应...
标签: Web开发
新写的JS 客户端 UI:采用包装模式的思想,富客户端UI就像外壳一样附加到普通的元素上。部分UI使用了两种实现,一种直接使用Html,CSS,JS结合的方式,一种直接使用JS(UI结尾的文件使用这种方式)。看过ExtJS做的,很漂亮,效果很绚,我做不到那种程度,但不喜欢那种编程方式,做ExtJS的的确是CSS,JS的高手,但没有提供良好的面对对象的设计...
标签: Web开发
Xsstc: Cross-site scripting through CSS data,看名字就看出来了,通过CSS跨站运行script,使用方法: 导入xsstcx.js(未压缩版xsstc.js) 添加一个id=”Xsstc”的空DIV。 在JS中调用Xsstc.exec(functionURL, callback),使用的内容作为callback的参数传入callback中 其中CSS的定义也有要求,下面是Hello World中CSS...

经验教程

302

收藏

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