JavaScript 第五章 JavaScript控制CSS
JavaScript 第四章 DOM编程提升
JavaScript 第五章 JavaScript控制CSS
注意：各案例素材已提供下载
1、技术目标
2、CSS选择器类型
3、JavaScript如何操作样式？
通过元素的两个常用属性可操作样式：
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、制作页面小广告特效
效果描述：
广告图片总是显示在页面上方，并且随滚动条同步移动，还提供
一个关闭广告的操作
效果图：
实现方案：
示例代码：
<!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、页面小广告特效代码关键点
获得层的样式对象：
如何获取滚动条滚动的距离呢？使用如下样式属性
属性??? ??????? 描述
=============================================
scrollTop???? 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollLeft???? 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间
????????????????? 的距离
clientWidth? 浏览器中可见内容的高度，不包括滚动条等边线，会随窗口的显示
????????????????? 大小改变
clientHeight 浏览器中可以看到内容的区域的高度
JavaScript 第四章 DOM编程提升