CSS高级特效.pptVIP

第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方法 li id one1 onclick setTab one,1,4 class hover 新闻 li id one2 onclick setTab one,2,4 图片 li id one3 onclick setTab one,3,4 锐点 li id one4 onclick setTab one,4,4 新闻视频 处理onclick事件 教员演示Tab的制作过程 制作页面Tab特效 如何实现页面Tab自动切换？ 效果演示 setTimeout autoChange ,2000 ; setTimeout定义每隔两秒钟自动调用一次切换Tab页的函数 制作页面Tab特效 在前一阶段示例基础上，编写自动切换Tab页的脚本 定义两个变量，分别用来存储当前Tab页编号和Tab页的总数量 var curS 1;//当前选中的Tab编号 var n 4;//Tab总数循环显示结束后，从第一个Tab继续循环 编写Tab页自动切换函数 function autoChange if curS 5 curS 1; for i 1;i n;i++ var menu document.getElementById one+i ; var con document.getElementById con_one_+i ; menu.className i curS?hover:; con.style.display i curS?block:none; curS++;//显示下一个Tab setTimeout autoChange ,2000 ; 制作页面Tab特效 在页面加载事件中调用autoChange函数