Web前端开发案例教程——HTML+CSS+JavaScript (11).pptVIP

11.3.2制作随鼠标滚动的广告图片 使用currentStyle或getComputedStyle() 可以获得层在网页中的位置，如果要获取滚动条滚动的距离，需要使用scrollTop、scrollLeft属性 在页面中有很多事件可以用来触发浏览器的行为，如表11.5所示的事件是制作该效果的常用事件。 （1）图片放在一个层中，使用CSS样式设置层的初始位置 （2）页面加载时，获取图片所在层的具体位置，即页面的left和top位置。 （3）获取页面初始位置时，要判断当前浏览器的类型，本例只判断是IE还是fireFox （4）当滚动条滚动时，获取滚动条距离页面顶端和左侧的距离，同时改变层距离顶端和左侧的位置。 dverObject=document.getElementById(adver); //获得层对象 if(adverObject.currentStyle){ adverTop=parseInt(adverObject.currentStyle.top); adverLeft=parseInt(adverObject.currentStyle.left); } else{ adverTop=parseInt(document.defaultView.getComputedStyle(adverObject,null).top); adverLeft=parseInt(document.defaultView.getComputedStyle(adverObject,null).left); } adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+px; adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+px; 在页面中有一个层，使用style属性获取层在页面中的位置。 function inix(){ adverObject=document.getElementById(adver); //获得层对象 …… } function move(){ adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+px; adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft)+px; } window.onload=inix; window.onscroll=move; …… 实例11-5：制作随鼠标滚动的广告图片 11.4使用下拉列表框实现级联效果 下拉框联动效果用于在两个或多个内容相关联的下拉框中选取数据，比如地址填写时，需要先选择省份再根据省份选择城市 下拉列表框使用select和option两个标签共同创建。Select对象代表HTML表单中的一个下拉列表框，option对象代表HTML表单中下拉列表框中的一个选项。 11.4.1下拉列表框对象 1、select对象常用事件、方法和属性 2、Option对象常用属性 ?text：设置或返回某个选项的纯文本值 ?value：设置或返回被送往服务器的值 JavaScript常用特效 第十一章 学习目标 ?掌握表单事件和脚本函数实现表单验证 ?掌握String对象和文本框控件常用属性和方法实现客户端验证 ?了解JavaScript和CSS的交互 11.1 表单验证 使用 JavaScript 进行表单验证，不但能检查用户输入的无效或错误数据，还能检查用户遗漏的必须项，从而减轻服务器端的压力，避免服务器端的信息出现错误，保证输入的数据符合要求 11.1.1表单验证的内容 需要验证的内容通常包括 ?日期是否有效或日期格式是否正确 ?表单元素是否为空 ?用户名和密码 ?E-mail地址是否正确 ?身份证号码等是否是数字 11.1.2 表单验证 当输入的表单数据不符合要求时，通常会进行提示 ?获得表单元素值，该值一般为string类型； ?使用JavaScript的一些方法对数据进行判断； ?当表单提示时，触发 onsubmit事件，对获取的数据进行验证。 11.1.3 string对象 String对象通常用于操作和处理字符串，可以在程序中获得字符串长度，对一个字符串按指定的样式显示，提取子字符串，求一个字符串中指定位置的字符以及将字符串转换为大写或小写字符。 1. 字符串对象的属性 length属性，它表示