第5章CSS高级特效(一)理论.pptVIP

scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。 clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。 offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。 第5章　CSS高级特效(一) 内容回顾 通过JavaScript脚本可以动态改变样式属性的值，语法如下 ： object.style.property; 使用className属性可以动态改变页面元素上应用的类选择器 样式属性display的作用是设置页面元素的显示方式，其值包括：none、inline、block JavaScript中的创建数组的方式有两种：一种是使用Array构造函数的方式，另一种是使用数据集合的方式 For-in语句可以遍历对象的所有属性，还可以遍历数组中的元素 本章内容 页面Tab特效的制作思路 页面遮罩层特效的制作思路 本章目标 制作网易门户首页内容分类Tab 制作实现QQ空间登录页面 1.制作页面Tab特效 如何实现页面Tab特效？ Tab菜单 Tab内容 使用display属性动态设置Tab菜单和Tab内容的显示和隐藏，使用className 动态切换样式规则 效果演示 实现页面Tab特效 Tab的组成由Tab菜单和Tab内容两部分组成 Tab菜单 Tab内容 实现页面Tab特效 使用display属性动态设置Tab菜单和Tab内容的显示和隐藏， 使用className动态切换样式规则 未选中状态 选中状态 Tab内容无上边框 制作页面Tab特效 实现步骤一： 使用div搭建Tab结构，使用ul和li搭建tab菜单结构 Tab菜单 各个内容版块 制作页面Tab特效 实现步骤二 编写用于Tab菜单和各个内容版块的样式规则，为Tab菜单定义鼠标 点击和正常显示两种样式规则 … //Tab菜单未被点击浏览时的样式规则 .Menubox { width:100%; background:url(images/out.gif); height:28px; line-height:28px; } //Tab菜单在鼠标点击时的样式规则 .Menubox li.hover{ 　　 ... 　　　background:url(images/hover.gif); 　　　... } 制作页面Tab特效 实现步骤三 编写JS脚本，实现动态改变Tab菜单的样式及显示版块内容 function setTab(name,cursel,n){ for(i=1;i=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById(con_+name+_+i); //动态改变Tab菜单的样式 menu.className=i==cursel?hover:; //设置版块内容的显示状态 con.style.display=i==cursel?block:none; } } 使用className属性切换样式规则 Display属性动态显示和隐藏Tab内容 制作页面Tab特效 实现步骤四 给每个Tab菜单添加onclick事件，调用setTab方法 ul li id=one1 onclick=setTab(one,1,4) class=hover新闻/li li id=one2 onclick=setTab(one,2,4)图片/li li id=one3 onclick=setTab(one,3,4)锐点/li li id=one4 onclick=setTab(one,4,4)新闻视频/li /ul 处理onclick事件 教员演示Tab的制作过程 制作页面Tab特效 如何实现页面Tab自动切换？ 效果演示 setTimeout(autoChange(),2000); setTimeout定义每隔两秒钟自动调用一次切换Tab页的函数 制作页面Tab特效 在前一阶段示例基础上，编写自动切换Tab页的脚本 定义两个变量，分别用来存储当前Tab页编号和Tab页的总数量 var curS=1;//当前选中的Tab编号 var n=4;//Tab总数循环显示结束后，从第一个Tab继续循环 编写Tab页自动切换函数 function autoCh