JavaScript 第五章 JavaScript控制CSS
注意:各案例素材已提供下载
1、技术目标
- 使用style属性制作菜单特效
- 使用className属性制作菜单特效
- 使用scrollTop制作随鼠标滚动的广告图片
2、CSS选择器类型
- 标签选择器
- ID选择器
- 类选择器
3、JavaScript如何操作样式?
通过元素的两个常用属性可操作样式:
- style 属性,语法:元素对象.style.样式属性 = "值"
- className 属性,语法:元素对象.className = "类样式名"
4、元素的常用事件
一般样式会由元素的事件触发而改变,先了了解下元素的常用事件,
名称 描述
====================================
onclick 当用户单击某个对象时调用事件
onmouseover 鼠标移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown 鼠标按钮被按下
5、制作菜单特效
效果描述:
当鼠标移动菜单上时,改变菜单样式,使其背景发生变化
鼠标移出菜单时恢复为原来的样式
效果图:
要实现该效果,可以考虑两种方案,
方案1:使用style属性
方案1,示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>使用style改变样式</title> <style type="text/css"> li{ font-size: 12px; color: #ffffff; background-image: url(images/bg1.gif); background-repeat: no-repeat; text-align: center; height: 33px; width:104px; line-height:38px; float:left; list-style:none; } </style> </head> <body> <ul> <li>资讯动态</li> <li>产品世界</li> <li>市场营销</li> </ul> <script type="text/javascript"> var len=document.getElementsByTagName("li"); for(var i = 0; i < len.length; i++){ //设置鼠标事件处理函数 len[i].onmouseover = function(){ //鼠标移入列表项时,改变背景图片 this.style.backgroundImage = "url(images/bg2.gif)"; } len[i].onmouseout = function(){ //鼠标移出列表项时,改变背景图片 this.style.backgroundImage = "url(images/bg1.gif)"; } } </script> </body> </html>
方案2:使用className属性
方案2,示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>使用className改变样式</title> <style type="text/css"> li{ font-size: 12px; color: #ffffff; background-image: url(images/bg1.gif); background-repeat: no-repeat; text-align: center; height: 33px; width:104px; line-height:38px; float:left; list-style:none; } /*鼠标移出列表项的样式*/ .out{ background-image: url(images/bg1.gif); } /*鼠标移入列表项的样式*/ .over{ background-image: url(images/bg2.gif); color:#ffff00; font-weight:bold; cursor:hand; } </style> </head> <body> <ul> <li>资讯动态</li> <li>产品世界</li> <li>市场营销</li> </ul> <script type="text/javascript"> var len = document.getElementsByTagName("li"); for(var i = 0;i < len.length; i++){ len[i].onmouseover = function(){ this.className = "over"; } len[i].onmouseout = function(){ this.className = "out"; } } </script> </body> </html>
6、制作页面小广告特效
效果描述:
广告图片总是显示在页面上方,并且随滚动条同步移动,还提供
一个关闭广告的操作
效果图:
实现方案:
- 把广告图片放在一个div中,设置div总是显示在页面的上方
- 使用getElementById()方法获取层对象,并且获取层在页面上的初始位置
- 根据鼠标滚动事件,获取滚动条滚动的距离
- 随着滚动条的移动改变广告图片层在页面上的位置
示例代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>带关闭按钮的滚动广告</title> <style type="text/css"> #main{ text-align:center; } #float{ position: absolute; width: 117px; height: 150px; left: 30px; top: 60px; z-index: 1; background-image: url(images/advpic.jpg); text-align: right; } #close{ cursor:hand; } </style> <script type="text/javascript"> var floatTop;//广告图片div初始上边距 var flostLeft;//广告图片div初始左边距 var floatObject;//广告图片div对象 /* 功能:关闭广告图片div */ function adv_close(){ document.getElementById("float").style.display="none"; } /* 功能:保存广告图片div初始上边距和初始左边距 */ function place(){ //获取广告图片div对象 floatObject = document.getElementById("float"); //保存广告图片div初始上边距和初始左边距 if(floatObject.currentStyle){//IE浏览器 floatTop=parseInt(floatObject.currentStyle.top); floatLeft=parseInt(floatObject.currentStyle.left); }else{//fireFox浏览器 floatTop=parseInt(document.defaultView.getComputedStyle(floatObject,null).top); floatLeft=parseInt(document.defaultView.getComputedStyle(floatObject,null).left); } } /* 功能:窗口滚动事件处理函数 */ function roll(){ floatObject.style.top=floatTop+parseInt(document.documentElement.scrollTop) + "px"; floatObject.style.left=floatLeft+parseInt(document.documentElement.scrollLeft) + "px"; } window.onload = place; //滚动事件处理 window.onscroll = roll; </script> </head> <body> <div id="float"> <div id="close" onClick="adv_close()"><img src="images/close.jpg"></div> </div> <div id="main"><img src="images/contentpic.jpg"></div> </body> </html>
7、页面小广告特效代码关键点
获得层的样式对象:
- currentStyle,IE中使用,语法:
层对象.currentStyle; - getComputedStyle(),fireFox中使用,语法:
document.defaultView.getComputedStyle(层对象,null);
如何获取滚动条滚动的距离呢?使用如下样式属性
属性 描述
=============================================
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间
的距离
clientWidth 浏览器中可见内容的高度,不包括滚动条等边线,会随窗口的显示
大小改变
clientHeight 浏览器中可以看到内容的区域的高度
JavaScript 第四章 DOM编程提升
相关推荐
第5章 HTML 5的多媒体支持 137 5.1 使用audio和video元素 138 5.2 使用JavaScript脚本控制媒体播放 141 5.3 事件监听 144 5.4 track元素 146 5.5 本章小结 149 第6章 级联样式单与CSS选择器 150 6.1 样式单...
**第3章:JavaScript脚本编程** JavaScript是Web开发中不可或缺的一部分,用于实现客户端的交互和动态效果。 1. **JavaScript基础**:变量、数据类型、操作符、流程控制、函数等基础知识。 2. **DOM(Document ...
**第五章:格式化页面正文** - **标题与段落**:合理使用标题和段落标签。 - **预格式化文本**:保持文本原有格式。 - **列表应用**:创建有序或无序列表。 - **文本修饰**:使用特定标签来强调或修饰文本。 **第...
第5章 HTML 5的多媒体支持 第二部分 第6章 级联样式单与CSS选择器 第7章 字体与文本相关属性 第8章 背景、边框和补丁相关属性 第9章 大小、定位、轮廓相关属性 第10章 盒模型与布局相关属性 第11章 表格、...
HTML5(超文本标记语言第五版)是网页内容的结构化语言,它提供了更丰富的语义元素,如、、、和等,使得网页内容的结构更加清晰,有助于搜索引擎优化和无障碍访问。此外,HTML5引入了离线存储机制(Application ...
《HTML+CSS+JavaScript网页制作案例教程(第2版)》是一本全面涵盖网页制作基础知识与实践技巧的教材。此教学大纲旨在引导学生系统学习网页设计的核心技术,通过理论讲解和实际案例,使学习者掌握网页开发的基本流程...
第5章超链接; 第6章图片与多媒体文件; 第7章CSS+DIV基础; 第8章CSS+DIV高级应用; 第9章表格; 第10章框架; 第11章表单; 第12章JavaScript基础; 第13章JavaScript事件分析; 第14章DOM和BOM; 第15章课程网站...
web前端开发,一本书带你学会Html5 css javascript。
通过CSS,你可以控制文本的字体、颜色、大小,设置元素的位置,甚至实现复杂的响应式设计,使网页在不同设备上都能呈现出良好的视觉效果。CSS3引入了许多新特性,如选择器、过渡、动画、多列布局和阴影效果等,极大...
在"JavaScript第5章答案"中,你会看到如何选取元素、添加或删除元素、监听事件以及使用CSS操作等。 最后,本章可能还会涵盖一些JavaScript的高级特性,例如异步编程(回调函数、Promise、async/await)、模块化...
"韩顺平JS笔记完整版.doc"则涵盖了JavaScript的核心概念,从变量、数据类型、运算符,到流程控制(条件语句、循环)、函数、对象和数组。还将涉及DOM操作,这是JavaScript与HTML交互的关键,包括获取元素、修改元素...
- 使用CSS可以控制页面布局、颜色、字体等视觉效果。 - JavaScript可以响应用户事件,进行数据验证,创建动态效果。 文件内容虽然提供的是前十章的课后答案,但只给出了部分章节的简答题内容,以上知识点是根据这...
本资源“accp5.0 s2 javascript第一章所有作业包括上机练习题”是针对北大青鸟ACCP5.0第二阶段JavaScript课程的一系列学习材料,旨在帮助学生巩固和提升JavaScript编程技能。 首先,让我们深入探讨JavaScript的基础...
第5章 用HTML5创建表格 第6章 使用表单 第7章 CSS3概述 第8章 CSS3字体与段落属性 第9章 CSS3美化表格和表单样式 第10章 CSS3美化图像 第11章 CSS3美化背景与边框 第12章 Java Script概述 第13章 Java ...
HTML5、CSS3和JavaScript是构建现代网页的三大核心技术,它们共同构成了网页的结构、样式和行为。这个压缩包文件“HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】”显然包含了丰富的学习资源,...
首先,HTML5(HyperText Markup Language第五版)是Web内容的结构化语言标准,它对旧版HTML进行了大量改进,引入了许多新的元素和属性,使得开发者能更方便地构建语义化的网页。例如,`<header>`、`<footer>`、`...
HTML5(超文本标记语言第五版)是网页内容的结构化语言,它增强了对多媒体的支持,如音频、视频、图像和SVG图形。HTML5引入了新的元素,如、、和,以更好地表示文档结构。此外,离线存储(Web Storage)和表单控件的...
在学习过程中,建议首先掌握HTML的基本语法和元素,然后学习CSS的布局技巧和样式控制,最后深入JavaScript,熟悉其语法和常用库、框架的应用。同时,不断练习编写代码,对照源码分析,逐步提高自己的网页设计和制作...
《疯狂HTML5_CSS3_JavaScript讲义_原书光盘》是一本专注于网页开发技术的书籍,由知名作者李刚编写。李刚以其程序员的独特视角,深入浅出地介绍了HTML5、CSS3和JavaScript这三种核心的前端技术,旨在帮助读者从软件...