`
HotStrong
  • 浏览: 509098 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JavaScript 第五章 JavaScript控制CSS

阅读更多


JavaScript 第四章 DOM编程提升


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编程提升

 

 

4
1
分享到:
评论

相关推荐

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    第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 样式单...

    JSP动态网站开发 第1章 JSP使用基础第2章 HTML与CSS第3章 JavaScript脚本编程…………

    **第3章:JavaScript脚本编程** JavaScript是Web开发中不可或缺的一部分,用于实现客户端的交互和动态效果。 1. **JavaScript基础**:变量、数据类型、操作符、流程控制、函数等基础知识。 2. **DOM(Document ...

    Html+Css+Javascript从入门到精通.pdf

    **第五章:格式化页面正文** - **标题与段落**:合理使用标题和段落标签。 - **预格式化文本**:保持文本原有格式。 - **列表应用**:创建有序或无序列表。 - **文本修饰**:使用特定标签来强调或修饰文本。 **第...

    疯狂HTML5\CSS3\JavaScript讲义-源代码

    第5章 HTML 5的多媒体支持 第二部分 第6章 级联样式单与CSS选择器 第7章 字体与文本相关属性 第8章 背景、边框和补丁相关属性 第9章 大小、定位、轮廓相关属性 第10章 盒模型与布局相关属性 第11章 表格、...

    疯狂HTML 5CSS 3JavaScript讲义光盘代码

    HTML5(超文本标记语言第五版)是网页内容的结构化语言,它提供了更丰富的语义元素,如、、、和等,使得网页内容的结构更加清晰,有助于搜索引擎优化和无障碍访问。此外,HTML5引入了离线存储机制(Application ...

    HTML+CSS+JavaScript网页制作案例教程(第2版)-教学大纲.zip

    《HTML+CSS+JavaScript网页制作案例教程(第2版)》是一本全面涵盖网页制作基础知识与实践技巧的教材。此教学大纲旨在引导学生系统学习网页设计的核心技术,通过理论讲解和实际案例,使学习者掌握网页开发的基本流程...

    Web前端开发技术——HTML、CSS、JavaScript

    第5章超链接; 第6章图片与多媒体文件; 第7章CSS+DIV基础; 第8章CSS+DIV高级应用; 第9章表格; 第10章框架; 第11章表单; 第12章JavaScript基础; 第13章JavaScript事件分析; 第14章DOM和BOM; 第15章课程网站...

    疯狂HTML5-CSS3-JavaScript讲义.pdf

    web前端开发,一本书带你学会Html5 css javascript。

    HTML CSS JAVASCRIPT标准教程 实例版_0

    通过CSS,你可以控制文本的字体、颜色、大小,设置元素的位置,甚至实现复杂的响应式设计,使网页在不同设备上都能呈现出良好的视觉效果。CSS3引入了许多新特性,如选择器、过渡、动画、多列布局和阴影效果等,极大...

    JavaScript第5章

    在"JavaScript第5章答案"中,你会看到如何选取元素、添加或删除元素、监听事件以及使用CSS操作等。 最后,本章可能还会涵盖一些JavaScript的高级特性,例如异步编程(回调函数、Promise、async/await)、模块化...

    韩顺平 html+css+javascript

    "韩顺平JS笔记完整版.doc"则涵盖了JavaScript的核心概念,从变量、数据类型、运算符,到流程控制(条件语句、循环)、函数、对象和数组。还将涉及DOM操作,这是JavaScript与HTML交互的关键,包括获取元素、修改元素...

    《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf

    - 使用CSS可以控制页面布局、颜色、字体等视觉效果。 - JavaScript可以响应用户事件,进行数据验证,创建动态效果。 文件内容虽然提供的是前十章的课后答案,但只给出了部分章节的简答题内容,以上知识点是根据这...

    accp5.0 s2 javascript第一章所有作业包括上机练习题

    本资源“accp5.0 s2 javascript第一章所有作业包括上机练习题”是针对北大青鸟ACCP5.0第二阶段JavaScript课程的一系列学习材料,旨在帮助学生巩固和提升JavaScript编程技能。 首先,让我们深入探讨JavaScript的基础...

    HTML5+CSS3+JavaScript网页设计8.zip

    第5章 用HTML5创建表格 第6章 使用表单 第7章 CSS3概述 第8章 CSS3字体与段落属性 第9章 CSS3美化表格和表单样式 第10章 CSS3美化图像 第11章 CSS3美化背景与边框 第12章 Java Script概述 第13章 Java ...

    HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】

    HTML5、CSS3和JavaScript是构建现代网页的三大核心技术,它们共同构成了网页的结构、样式和行为。这个压缩包文件“HTML5+CSS3+JavaScript网页制作从入门到精通054245【实例示例源程序】”显然包含了丰富的学习资源,...

    HTML5+CSS3+Javascript离线版参考手册

    首先,HTML5(HyperText Markup Language第五版)是Web内容的结构化语言标准,它对旧版HTML进行了大量改进,引入了许多新的元素和属性,使得开发者能更方便地构建语义化的网页。例如,`&lt;header&gt;`、`&lt;footer&gt;`、`...

    html5+css2.0+css3.0+javascript手册

    HTML5(超文本标记语言第五版)是网页内容的结构化语言,它增强了对多媒体的支持,如音频、视频、图像和SVG图形。HTML5引入了新的元素,如、、和,以更好地表示文档结构。此外,离线存储(Web Storage)和表单控件的...

    《网页设计与制作项目教程(HTML+CSS+JavaScript)》-配套源码.zip

    在学习过程中,建议首先掌握HTML的基本语法和元素,然后学习CSS的布局技巧和样式控制,最后深入JavaScript,熟悉其语法和常用库、框架的应用。同时,不断练习编写代码,对照源码分析,逐步提高自己的网页设计和制作...

    疯狂HTML5_CSS3_JavaScript讲义_原书光盘

    《疯狂HTML5_CSS3_JavaScript讲义_原书光盘》是一本专注于网页开发技术的书籍,由知名作者李刚编写。李刚以其程序员的独特视角,深入浅出地介绍了HTML5、CSS3和JavaScript这三种核心的前端技术,旨在帮助读者从软件...

Global site tag (gtag.js) - Google Analytics