I 浏览器对象与特效.ppt

JavaScript中的浏览器对象与特效 2 2 回顾 String字符串函数表单基本验证表单验证特效外部JS文件 3 3 目标 理解事件处理程序的概念了解JavaScript中的常用事件掌握常用的浏览器对象 WindowLocationDocumentFormHistoryJavascript特效 4 4 浏览器对象简介 window窗口对象 location地址对象 document文档对象 form表单对象 浏览器对象的分层结构 window document myform text1 5 5 浏览器对象简介 浏览器对象的分层结构 6 6 Window对象 Window对象的常用属性 7 7 Window对象 Window对象的常用方法 8 8 Window对象 functionopenwindow window open google htm functionclosewindow window close 使用Open方法打开新窗口 使用Close方法关闭当前窗口 添加单击事件 Window对象的方法示例 9 9 open 打开窗口的url 窗口名 窗口特征 窗口的特征如下 可以任意组合 height 窗口高度 number width 窗口宽度 number top 窗口距离屏幕上方的象素值 number left 窗口距离屏幕左侧的象素值 number toolbar 是否显示工具栏 yes no或1 0 menubar 表示是否包含菜单栏 yes no或1 0 scrollbars 表示是否包含滚动栏 yes no或1 0 resizable 是否允许改变窗口大小 yes no或1 0 location 是否显示地址栏 yes no或1 0 status 是否显示状态栏内的信息 yes no或1 0 Window对象 10 10 functionopenwindow window open a html toolbar 0 scrollbar 0 location 0 status 0 menubar 0 resizable 0 width 650 height 150 看看和我一起打开的广告窗口 Window对象 使用Open方法打开广告新窗口 添加页面加载事件 11 mystyle position absolute left 12 top 222 也可以用js自定义函数实现 11 实现图片随鼠标移动而移动 Window对象 12 12 History对象 History对象的常用方法 13 13 Location对象 Location的href属性设置或检索完整的URL字符串使用方法 window location href 示例 按钮单击事页面跳转 14 14 更改样式中的属性值 处理鼠标事件更改背景图片样式 cssdemo3functionchangebg pic vartable document getElementById tb table style backgroundImage url pic 单击时更改背景图片 设置表格样式背景 15 15 变换图片div 图片自动变换 单击按钮自动变换 16 16 变换图片div 可以把变换分为几个部分 循环变换图片鼠标移动到图片 图片停止变换鼠标移动到图片外 图片重新开始变换单击按钮时切换按钮对应的图片 考虑 在img中每隔一段时间更换img的src属性即可换图按钮在另一个悬浮在图片上的div当中页面加载变换即开始 17 17 HTML部分 图片框 按钮部分 注意 在图片上处理了鼠标移动事件imgstop 在图片上处理了鼠标移出事件imgstart 第一个div用来放置图片第二个div用来放置按钮 需要悬浮于第一个div之上 18 18 javascript部分1 varimgc 1 图片序列开始varimgm 7 图片序列结束varflag 1 标记鼠标移动是否放在图片上vartm 定时器 自动循环播放图片functioncgimg if flag 0 return varmimg document getElementById mimg mimg src imgc jpg imgc if imgc imgm imgc 1 tm window setTimeout cgimg 2000 全局变量 隔2秒自动调用一次 0表示鼠标在图片上 换另一张图片 设置循环播放函数 如果换到第八张重新从第一张开始 19 19 javascript部分2 鼠标移动到图片上functionimgstop flag 0 window clearTimeout tm 鼠标移动到图片外functionimgstart flag 1 tm window setTimeout cgimg 1000 鼠标移动到按钮时functionmoimg imgurl window clearTimeout tm varmimg document getElementById mimg mimg src imgurl 标记鼠标在图片上 清除定时器 清除定时器 标记鼠标离开图片 1秒侯启动变换图片函数 Img设定为按钮指定的图片 20 20 javascript部分3 初始化按钮functioninitbtn varbtndiv document getElementById btndiv for i imgc j 1 i j 在按钮的浮层上加上按钮 鼠标离开按钮时变换 鼠标进入按钮时 varimgc 1 图片序列开始varimgm 7 图片序列结束 循环产生多个按钮 连接 同时加上按钮事件鼠标移动到按钮时显示按钮所对应的图片鼠标移开时 重新开始循环播放 21 21 Div浮层的应用 22 22 Window对象 单击登录显示div 单击隐藏关闭div 23 23 html部分 登录 调用隐藏函数 设置div的绝对定位 调用显示函数 24 24 javascript部分 div的显示函数functionshowdiv varmydiv document getElementById mydiv mydiv style display inline div的隐藏函数functiondispdiv varmydiv document getElementById mydiv mydiv style display none 更改div的样式为显示 设置div的样式 更改div的样式为隐藏 25 25 菜单栏 标题栏 选项栏 26 26 html部分 科幻黑衣人地狱神探终结者蝙蝠侠超人地狱男爵钢铁侠变形金刚 标题栏 选择项 27 27 css部分 m 标题栏background image url n jpg height 26 cursor hand color ffffff font weight bold text align center font size 13px n 未选中的选项栏background color FFFFCC height 26 cursor hand text align left padding left 40 font size 13px color FF3333 distd 选项栏整体display none 鼠标样式 内容的对齐方式 28 28 javascript部分 functionchangetd obj varctd document getElementById obj if ctd style display inline ctd style display none else ctd style display i