`
HotStrong
  • 浏览: 509121 次
  • 性别: 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
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics