实战题，鼠标拖拽效果教程-慕课网

实战题

学习完《遮罩全屏及自动居中浮层》课程后，进行本题目的实战练习，通读右侧编辑器中的代码，完成相应的任务！本

模块有三个任务等着你去完成！

任务

任务1：请在右侧编辑器的133行补充完整脚本中g函数的内容

任务2：请在右侧编辑器的143行补充完整脚本 autoCenter 函数中 计算元素居中时left的值的具体代码

任务3:请在右侧编辑器的133行补充完整脚本中 fillToBody 函数中 获取可视区域高度的代码

温馨提示：完成的任务要与要求的代码效果相一致才可以通过本次测试，否则就再看一遍视频哦！

?不会了怎么办: 如果出不了结果，就再温习一下内容吧，本内容是重点，没有提示哦！

||

index.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>慕课网-拖拽效果</title> <style type="text/css"> body{background: url(images/baidu_demo.png) #fff top center no-repeat; padding: 0px;margin: 0px;font-size: 12px;font-family: "微软雅黑"; } /*登录浮层组件*/ .ui-dialog{ width: 380px;height: auto; position: absolute;z-index: 9000; top: 100px;left: 100px; border: 1px solid #D5D5D5;background: #fff; } .ui-dialog a{text-decoration: none;} /*标题栏区域*/ .ui-dialog-title{ height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px; border-bottom: 1px solid #efefef;background: #f5f5f5; cursor: move; user-select:none; } /*关闭按钮设置*/ .ui-dialog-closebutton{ width: 16px;height: 16px;display: block; position: absolute;top: 12px;right: 20px; background: url(images/close_def.png) no-repeat;cursor: pointer; } .ui-dialog-closebutton:hover{background:url(images/close_hov.png);} /*内容区域*/ .ui-dialog-content{ padding: 15px 20px; } /*每行元素可能需要的样式*/ .ui-dialog-pt15{ padding-top: 15px; } .ui-dialog-l40{ height: 40px;line-height: 40px; text-align: right; } /*输入框公用的样式*/ .ui-dialog-input{ width: 100%;height: 40px; margin: 0px;padding:0px; border: 1px solid #d5d5d5; font-size: 16px;color: #c1c1c1; text-indent: 25px; outline: none; } /*两个输入框的icon设置*/ .ui-dialog-input-username{ background: url(images/input_username.png) no-repeat 2px ; } .ui-dialog-input-password{ background: url(images/input_password.png) no-repeat 2px ; } /*提交按钮的样式*/ .ui-dialog-submit{ width: 100%;height: 50px;background: #3b7ae3;border:none;font-size: 16px;color: #fff; outline: none;text-decoration: none; display: block;text-align: center;line-height: 50px; } .ui-dialog-submit:hover{ background: #3f81b0; } .ui-mask{ width: 100%;height:100%;background: #000; position: absolute;top: 0px;height: 0px;z-index: 8000; opacity:0.4; filter: Alpha(opacity=40); } .link{ text-align: right;line-height: 20px;padding-right: 40px; } </style> </head> <body > <div class="ui-dialog" id="dialog"> <div class="ui-dialog-title" id="dialogTitle"> 登录通行证 <a href="javascript:hideDialog();" class="ui-dialog-title-closebutton"></a> </div> <div class="ui-dialog-content"> <div class="ui-dialog-pt15 ui-dialog-l40"> <input type="text" value="手机/邮箱/用户名" class="ui-dialog-input ui-dialog-input-username"> </div> <div class="ui-dialog-pt15 ui-dialog-l40"> <input type="text" value="密码" class="ui-dialog-input ui-dialog-input-password"> </div> <div class=" ui-dialog-l40 "> <a href="#">忘记密码</a> </div> <div> <a href="#" class="ui-dialog-submit">登录</a> </div> <div class="ui-dialog-l40"> <a href="#">立即注册</a> </div> </div> </div> <div class="link"> <a href="javascript:showDialog();">登录</a> </div> <div class="ui-mask" id="mask" onselectstart="return false"></div> <script type="text/javascript"> // 获取元素对象 function g(id){【任务1】} // 自动居中元素（el = Element） function autoCenter( el ){ var bodyW = document.documentElement.clientWidth; var bodyH = document.documentElement.clientHeight; var elW = el.offsetWidth; var elH = el.offsetHeight; el.style.left = 【任务2】 + 'px'; el.style.top = (bodyH-elH)/2 + 'px'; } // 自动扩展元素到全部显示区域 function fillToBody( el ){ el.style.width = document.documentElement.clientWidth +'px'; el.style.height = 【任务3】 + 'px'; } </script> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

||

4-3 实战题

实战题

任务

提问题

其他问答

写笔记

您还未绑定服务号

收藏课程后，能更快找到我哦～

手记推荐