JavaScript 第五章 JavaScript控制CSS-CSDN博客

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