如何获取荧幕坐标位置_web-如何提高学习JS的能力

嗨喽大家好，我是乌拉拉ヾ(✿ﾟ▽ﾟ)ノ！作为一只从业五年多(前端)的小仙女，近来很多入坑的前端萌新私信我说学习到的知识不知道怎么运用，每次做案例不看答案就写不出来，为此很是苦恼，不知道怎么去提升思路，对未来学习发展充满了迷茫。如果你现在也是这种状态那你可一定要小心了，后面我说的话很关键哦！

其实这种情况对于 0基础自学前端的萌新来说很常见了，一方面是因为案例并不符合自身水平，另一方面就是没有去分析功能实现思路，乌拉拉当年也有过这样的情况呢！从小到大学校学习都是有同学老师一起陪伴着，有不懂的问题身边都有能帮助的人在，总有一个指路人在那里告诉你学什么、怎样学等等，可惜的是当年没有好好珍惜在学校努力学习的时光，上了大学就开始玩乐，以至于最后毕业了面临求职才发现巨大的落差，不得不从头开始，现在回首往事也是感慨颇多。

如果你跟曾经的我一样那么希望乌拉拉说的这些能让你明白不要走我当年的老路，扎扎实实学技术才是要紧事哦，如果有哪里不理解的或者需要学习教程等都可以加我微信webwula私聊！(在文章底部)

好啦，话不多说，今天就专门给大家准备了一个特效的案例思路剖析，你可不要因为是特效就有抵触情绪哦，因为我听过太多人说工作中不写特效所以学习它没有任何作用这一类的话，但工作中不用你就不用学习嘛？哪天boss需要你写个但市面有没有合适的特效插件你难道要告诉boss“不好意思，没有合适的特效插件，我做不出来”吗？那结果不用我说吧！需得知道，没有没用的技术，只有不会利用技术提升自己的人，百度能解决的问题都不叫问题好嘛︿(￣︶￣)︿。

特效意为特殊效果，当下已经是炫酷好看效果的代名词，很多人会使用它来装饰自己的项目产品或者用来向女友表白小浪漫一把，但学习它的目的是为了帮助自己拓展思路提升自己的，先给大家看一下效果动图：❥(ゝω・✿ฺ)点击观看

​看了效果后，你是不是会喊“oh no ！没思路！”，或者有点大概的思路但是抓不住，那今天就教你一招，遇到问题第一步就是拆分，把一个难解决的大问题拆分成多个小问题，再一个个去解决那些小问题，如果拆分后的小问题还解决不了， 那就再拆分，直到拆分成你能解决的一个个小问题，最终大问题也就解决了！关键就在于如何拆分？

刚学不久的萌新可以从使用的角度去观察每个步骤，根据步骤来进行拆分。

首先，这是一个鼠标按下后 移动拖拽生成的一张图片，图片大小由鼠标移动的范围决定，图片盒子展示的不是全部图片内容，而是部分的图片区域，从这个功能展现就可以分析出下面几点：

1、鼠标按下。在哪按下？在页面中按下，也就是说可能是设置了window或者document的onmousedown事件监听的鼠标按下行为。(这里就以window的来，至于window和document的区别不知道的小可爱百度查一下)那么与鼠标按下行为一同变化的是什么呢？仔细看你能发现整个效果里 鼠标按下-->拖拽 的过程会有一张图片出现，这个图片盒子在什么时候出现？

第一、鼠标拖拽改变的是图片的大小，意味着图片在拖拽之前就已经存在了。

第二：效果是以鼠标点击才开始展示，我们的鼠标在哪里按下图片的初始坐标就在哪里，也就是需要从事件对象中获取到鼠标坐标。这两点就足够说明是先有的鼠标按下，再生成的图片，并获取鼠标按下的坐标 设置为 图片的初始坐标。

并且想要给图片设置任意坐标就得设置定位属性了，加上图片大小变化时展示的是部分区域不是完整的图片，需要使用背景图片来做。✧(≖ ◡ ≖✿

下面是我准备的图片素材和html文件夹位置的截图：

代码：

2、鼠标拖拽。在页面中，鼠标按下后不松开 再 移动鼠标实现拖拽，那你看到这里就得思考下有什么方法能实现，对，就是document的onmousemove事件监听鼠标移动。同时，看起来与鼠标移动一同变化的还有div(图片盒子)的大小，但这里要注意难点来了！实际上一同变化的不仅是大小，还有div的坐标位置。贴两张动图对比下：

鼠标向右下移动示例动图：点击观看

在鼠标向右做拖拽时，div的坐标位置是没有改动的(网页中的元素坐标都以左上角为原点)，只是随着鼠标移动改变了大小，求出 div的大小 = 鼠标移动的坐标 - 鼠标按下的坐标，div的坐标位置 = 鼠标按下的坐标，但还有一种情况，如下图所示：

鼠标向左上移动示例动图：点击观看

在鼠标向左上做拖拽时，div的坐标位置被改动了(网页中的元素坐标都以左上角为原点)，并且随着鼠标移动也改变了大小，也就是当前反向拖拽的情况下(注意看动图里的红圈)。

求出 div的大小 = 鼠标按下的坐标 - 鼠标移动的坐标，也就是减数位置颠倒，可以使用绝对值来处理。 而 div的坐标位置 = 鼠标移动的坐标，通过观看可以看到，不论是 鼠标按下的坐标 还是 鼠标移动坐标 最终能成为div的坐标值的只有两者中最小的那一个数值，所以这里使用Math.min()来比较最小数，代码如下：

3、随机背景图片。准备的图片素材如下：

图片名字都是从0到6递增的整数字，拖拽时显示的随机背景图片有多种方式可以实现，这里我们就利用Math.random()来实现，将之前写的设置背景图片的代码修改下：

4、鼠标抬起。鼠标抬起事件是onmouseup，整体的功能流程是 鼠标按下----> 鼠标移动拖拽 ----> 鼠标抬起，我们的拖拽事件在注册后会一直监听触发，但实际需要的是在 鼠标抬起 后要停止鼠标移动事件的执行，也就需要在鼠标抬起时 注销鼠标移动事件，设置onmousemove值 为null 就行。(๑＞ ＜)☆

到这里整体的案例效果就实现了，你看，是不是有老师教你如何分析思路后 实现起来就很简单了呢！ヾ(ｏ･ω･)ﾉ类似这样的案例分析老师也不只准备这一个，我也在我的小程序里上新了很多帮助大家提升技术能力的视频教程，如果你想跟我学习，想要这些视频教程或者其他项目案例源码来帮助自己提升技术能力，欢迎加我微信webwula 和我讨论学习问题哦！(^_−)☆