为了账号安全,请及时绑定邮箱和手机立即绑定
简介:用鼠标拖拽弹出窗口是我们每天用到最多的功能之一。本案例以百度网站的登录窗口为例,讲解鼠标拖拽效果如何实现,拖拽范围限定以及登陆窗口自动居中。通过本案例,你将学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理。

第1章 案例效果展示及原理分析

鼠标拖拽效果的展示,并对这个效果如何实现进行简单的原理分析。

第2章 登录浮层静态页面实现

对鼠标拖拽的主体——登录浮层的相关布局进行实现。

第3章 遮罩及登录链接布局实现

点击“登录”弹出浮层,同时出现遮罩,本章告诉你这些如何实现。

第4章 遮罩全屏及自动居中浮层

用JavaScript脚本来实现登陆浮层的自动居中效果。

第5章 三个关键鼠标拖拽事件

本部分主要是对鼠标拖拽效果的实现,详细讲解点击、拖动、释放三个鼠标事件。

第6章 拖动范围限定

登录浮层不是可以任意拖动的,它只能在屏幕的可视窗口范围内活动。

第7章 触发打开及关闭登录浮层

对登录浮层的打开及关闭动作进行讲解,并对窗口大小改变时出现的滚动条问题进行解决。

第8章 课程总结

对鼠标拖拽特效实现过程的开发流程进行详细梳理,并对每一步的关键技术进行总结,尤其是用到的函数部分。
课程须知
1.对DIV和CSS基本内容掌握,理解元素的定位的概念 2.对JS基本语法掌握,理解函数和事件的概念 3.适合一定实战经验的中级以上层次人员学习。
老师告诉你能学到什么?
1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏
意见反馈 帮助中心 APP下载
官方微信