使用JavaScriptjQuery实现页面特效第三章-实践.pptVIP

* 实践三 DOM编程 实践目标 美淘网登录按钮特效 手机注册和邮箱注册的Tab切换 鼠标悬浮于按钮时，按钮高亮显示；鼠标离开时，按钮恢复原貌。 鼠标悬浮于“登录”按钮时，按钮高亮显示，鼠标离开时，按钮恢复原貌。效果如图： 任务一：美淘网按钮特效 （1）获取一组指定name=btnLogin的“登录”按钮。 （2）创建函数changeBtn()，实现用循环依次给两个登录按钮的onmouseover和onmouseout事件绑定处理的函数。 （3）在事件绑定的函数中，设置图像按钮的src属性，利用更换图像来达到高亮显示和恢复原貌的特效。 （4）给body标签的onload事件关联changeBtn()方法。 任务一：美淘网按钮特效 任务一：美淘网按钮特效 input type=image src=images/login.jpg class=btn name=btnLogin / ...... script type=text/javascript function changeBtn(){ //获取一组指定name=btnLogin的html页面元素对象 var btns=document.getElementsByName(btnLogin); for(var i=0;ibtns.length;i++){ btns[i].onmouseover=function(){ this.src=images/login_over.jpg; } btns[i].onmouseout=function(){ this.src=images/login.jpg; } } } /script 鼠标悬浮于美淘网login.html页面中“同意以上条款并注册”按钮时，按钮高亮显示；鼠标离开时，按钮恢复原貌。 任务一：美淘网按钮特效 制作两个选项卡页Tab，让用户可以分别通过邮箱和手机进行注册。 每个Tab有对应的菜单和内容版块，点击某个菜单时，显示对应的内容版块，隐藏其他内容版块，并且为了突出当前的Tab菜单，设置其背景样式。 任务二：选项卡页Tab切换 美淘网的注册版块，默认显示“邮箱注册”的选项卡页，当单击注册选项卡菜单时，如“手机注册”，切换到相应的版块内容且更换“手机注册”菜单的样式。 任务二：选项卡页Tab切换 （1）修改login.html页面以及对应的css样式。 （2）自定义函数setTab，实现当前菜单样式的更改和对应内容版块的显示、其他内容版块的隐藏。 （3）事件和处理程序的关联。Tab菜单的“onclick”事件绑定“setTab”函数。 任务二：选项卡页Tab切换 任务二：选项卡页Tab切换 ul li class=current id=one1 onclick=setTab(1)邮箱注册/li li id=one2 onclick=setTab(2)手机注册/li /ul ....... div id=phonereg style=display:none 当前菜单样式 去掉前期使用的a标签 隐藏第二个版块 任务二：选项卡页Tab切换 /*Tab菜单 */ # register ul li{ display:block; width:75px; height:25px; line-height:25px; text-align:center; margin-right:5px; background-image:url(../images/gray.gif); cursor:hand; } /*Tab当前菜单 */ #content ul li.current{ color:white; background-image:url(../images/current.gif); } 任务二：选项卡页Tab切换 function setTab(id){ //参数id：当前Tab菜单的编号 if(id==1){//如果单击的菜单是“邮箱注册” document.getElementById(emailreg).style.display=block; document.getElementById(phonereg).style.display=none; document.getElementById(one1).className=current; document.getElementById(one2).cl