2017年12月4日
JS——拖拽盒子
摘要： 注意事项： 1、opacity是全部元素变透明，rgba只是背景色变透明 2、先是注册鼠标按下的事件，此时就需要记录鼠标在盒子中的坐标 3、再在鼠标按下事件中注册鼠标移动事件，此时鼠标的坐标是不断变化的，盒子的坐标就是鼠标的坐标减去鼠标在盒子的坐标 4、top.onmousemove = funct 阅读全文
posted @ 2017-12-04 17:20 var_obj 阅读(1444) 评论(0) 推荐(0) 编辑
JS——放大镜
摘要： 放大镜： 1、比例系数要恒定：在系数为4的情况下，若原图是820*512，那么小图必须是205*128，放大镜若是50，原图显示区域必须200 2、计算鼠标在小图中的坐标 3、放大镜需要在鼠标中间位置，也就是鼠标在盒子中的坐标减去其宽度高度的一半 4、放大镜移动范围：marginLeft、margi 阅读全文
posted @ 2017-12-04 14:58 var_obj 阅读(269) 评论(0) 推荐(0) 编辑
JS——鼠标在盒子中的坐标
摘要： 核心思想： 1、复杂版本：鼠标pageX、pageY的值减去盒子距离顶端的offsetLeft、offsetTop值就是鼠标在盒子中的坐标 2、简单版本：offsetX、offsetY就可获取鼠标相对于事件触发对象的坐标，以事件触发对象左上角为基准点 阅读全文
posted @ 2017-12-04 14:46 var_obj 阅读(1094) 评论(0) 推荐(0) 编辑
JS——鼠标跟随
摘要： 注意事项： 1、pageX、pageY的兼容问题 2、使目标移动鼠标中间位置还必须减去盒子宽度的一半 阅读全文
posted @ 2017-12-04 14:40 var_obj 阅读(222) 评论(0) 推荐(0) 编辑
JS——event
摘要： 触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息： 普通浏览器支持 event（传参），IE678支持 window.event（无参），兼容写法： client、page、screen三者之间的区别： pageX、pageY在IE678中不支持，兼容写法 阅读全文
posted @ 2017-12-04 10:41 var_obj 阅读(186) 评论(0) 推荐(0) 编辑