课程/JavaScript/前端开发
鼠标拖拽效果
-
-
haihi
2017-03-12
- 获取/设置 元素对象的left/top 位置
Element.style.left
Element.style.top
重新为left 和 top 赋值,格式是‘?px’,例如 Element.top='10px'
-
截图
0赞 · 0采集
-
-
haihi
2017-03-12
- 重点属性:
窗口显示区域的宽/高:
document.documentElement.clientWidth
document.documentElement.clientHeight
获取当前时间发生时的鼠标X/Y坐标:
event.pageX
event.pageY
获取元素对象的实际宽高:
element.offsetWidth
element.offsetHeight
-
截图
0赞 · 0采集
-
-
haihi
2017-03-12
- 脚本中用到的 重点函数
-
截图
0赞 · 0采集
-
-
haihi
2017-03-12
- 脚本开发 及其用到的函数
-
截图
0赞 · 0采集
-
-
haihi
2017-03-12
- 前段界面开发
-
截图
0赞 · 0采集
-
-
haihi
2017-03-12
- 拖拽原理分析
-
截图
0赞 · 0采集
-
-
haihi
2017-03-12
- 页面结构分析
-
截图
0赞 · 0采集
-
-
pluto_lxh
2017-02-19
- 1、界面结构分析
dialog{
dialogTitle{
dialogClose
}
dialoglogContent{
用户名
密码
登录按钮
}
}
2、拖拽原理
在标题栏上按下()记录浮层可拖拽
开始移动{
判断浮层是否可以拖动
跟随鼠标移动
范围限定
}
放开()记录浮层不可拖拽
3、前端界面开发
登录浮层(dialog)
遮罩层(mask)
触发链接()
4、脚本开发
获取元素对象的通用函数 $(id){ return document.getElementById(id); }document
自动居中元素对象函数 autoCenter(ele)
自动全屏元素对象函数 fillTOBody(ele)
三个鼠标事件处理
展现登录浮层函数 showDialog()
隐藏登录浮层函数 hideDialog()
重点用到的函数
document.getElementById(id) 根据传入的id获得元素(element)对象
Element.addEventListener(type,function) 为元素对象设置事件侦听处理
document.onmouseup=function(e){} 鼠标松开时触发
document.onmousemove=function(e){} 鼠标移动时触发
window.onresize=function(){} 窗口大小改变时触发的方法
重点属性
document.documentElement.clientWidth 获得窗口显示区域的宽
document.documentElement.clientHeight 获得窗口显示区域的高
Event.pageX 获得当前事件发生时的鼠标X坐标
Event.pageY 获得当前事件发生时的鼠标Y坐标
Element.offsetWidth 获得元素对象的实际宽度
Element.offstHeight 获得元素对象的实际高度
设置位置
Element.style.left 获取/设置元素对象的left/top 位置
Element.style.top
-
0赞 · 0采集
-
-
班大人
2017-02-08
- 獲取各種寬高
-
截图
0赞 · 0采集
-
-
创心
2017-01-04
-
拖拽重点属性
-
截图
0赞 · 0采集
-
-
创心
2017-01-04
- 拖拽 重点属性
-
0赞 · 0采集
-
-
创心
2017-01-04
- 重点函数
-
截图
0赞 · 0采集
-
-
P妞酱酱
2016-10-24
- 嘻嘻嘻嘻嘻嘻嘻嘻嘻
-
截图
1赞 · 1采集
-
-
P妞酱酱
2016-10-24
- 喜喜喜喜喜喜喜喜喜喜喜喜喜喜喜喜
-
截图
0赞 · 0采集
-
-
qq__1939
2016-10-16
- 重点属性
-
截图
0赞 · 0采集
-
-
冷月诗魂
2016-09-18
- 拖曳特效总结———重点属性
-
截图
1赞 · 3采集
-
-
冷月诗魂
2016-09-18
- 拖曳特效总结———重点函数
-
截图
0赞 · 1采集
-
-
珍惜小燕子
2016-07-11
- 拖拽总结
-
截图
0赞 · 1采集
-
-
隐身人
2016-01-01
- 拖拽原理分析
-
截图
0赞 · 0采集
-
-
隐身人
2016-01-01
- 界面结构分析
-
截图
0赞 · 0采集
-
-
K丶L
2015-11-14
- 重点属性
-
截图
0赞 · 0采集
-
-
K丶L
2015-11-14
- 重点函数
-
截图
0赞 · 0采集
-
-
K丶L
2015-11-14
- 脚本开发
-
截图
0赞 · 0采集
-
-
K丶L
2015-11-14
- 拖拽原理分析
-
截图
0赞 · 0采集
-
-
K丶L
2015-11-14
- 界面分析
-
截图
0赞 · 0采集
-
-
june18th
2015-08-14
- 属性部分内容:
-
截图
0赞 · 0采集
-
-
june18th
2015-08-14
- 拖拽效果核心函数
-
截图
0赞 · 0采集
-
-
june18th
2015-08-14
- 脚本开发部分:
-
截图
0赞 · 0采集
-
-
june18th
2015-08-14
- 拖拽原理图:
-
截图
0赞 · 0采集
-
-
梦身
2015-08-03
- 拖拽总结用的重点函数
-
截图
0赞 · 0采集