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