分类：效果

2020
10-08

JS实现网站楼层导航效果代码实例

壹❀引言对于楼层导航而言，还有个重要的功能就是，随着滚动条滚动，达到某层时得同步点亮楼层导航的小图片。由于我前面也说了不打算使用JQ，所以想着用JS去实现它，实现并不难，主要得弄清滚动满足怎样的条件才应该点亮对应楼层，我们先看看实现效果：贰❀实现思路第一点，因为是由滚动触发的楼层判断，所以肯定离不开onscroll事件。第二点，我们貌似要获取每个楼层顶端距离视窗顶部的距离，随着滚动条往下滚动，... 继续阅读 >

2020
09-28

如何实现js拖拽效果及原理解析

元素拖拽分成3个步骤：按下鼠标，移动鼠标，松开鼠标。拖拽原理：按下拖拽元素后开始监听文档中鼠标移动事件，然后再监听鼠标松开事件；鼠标移动时，元素div要随着鼠标一起移动，需要计算元素div位移的距离（移动的距离=鼠标离可视窗口的位置?鼠标在div中相对于左上角的位置）。然后松开鼠标时，删除移动事件和松开事件，元素完成拖拽。一开始先监听鼠标按下事件mousedown，事件触发执行mouseHandler函数；div.addEventListener(... 继续阅读 >