112.尚硅谷_JS基础_div跟随鼠标移动

这样说完，然后做一个这个小的一个练习啊，009来一个这个练习，练习呢也比较简单啊，就一个div井号，来个BOX1，然后呢，给它设置一下这个样式，来一个这个井号box box1 box1，我们来一个这个WHITE100个像素，Hat一个这个100个像素，然后来一个background color，来一个RED1。我没写一是吧。一个写啊保存可以刷新，是不是一个红色的一个div啊，诶红色一个div，那现在我要做一个什么功能啊，那你来看我这个鼠标是不是可以在我这个页面里边移动啊，那现在我希望什么呢？我希望这个div可以跟随我的鼠标去移动，鼠标到这div也跟这儿，鼠标到这儿，Div就跑这儿来，对吧，跟随我们鼠标移动，鼠标去哪它就干嘛呀，他要去哪啊，他要去哪我不见鼠标是吗？来，那咱们这个动作我们要怎么做呀？首先写一个这个死script的标签，我们来先描述先把什么呀，先把这个window点啊漏等于这个三个人先把它写上，然后呢，我们就来说一下我要写什么功能叫什么呢？诶十我们什么呢？我们这个可以跟随我们这个鼠标移动啊，使我们这个div可以跟随鼠标移动。那我们应该。

哎，先干嘛呀，那我得先知道鼠标，鼠标动没动吧？哎，鼠标动没动，鼠标一动我是不是就修改我们这个boss机的位置啊，鼠标一动就修改boss机的位置，但是问题来了，我怎么知道鼠标洞呢？哎，是不是那个on Mo木事件呀？诶那on Mo木我们绑定给谁啊？诶绑定给boxs一行不行，诶咱们试试啊试试直接我这先来干嘛呢？获取我们这个BOX1，直接挖一个BOX1，等于一个do do的点一个guide and版ID，来一个BOX1，然后呢，我们这来干嘛呢？来绑定我们这个鼠标移动事件，直接BOX1，点一个on mouse move等于个这个function function我们先来看看，直接alert一个123，然后一保存，我们看效果，这一刷新移动是不是触发了呀，还就触发了，触发以后呢，那接下来我们来看。

事件可以了是吧，哎，但是这事件我这绑定完了呢，这块我得干嘛呀，我是不是得修改我们这个boss机的位置啊，但是修改BOSS1的位置之前，我现在干嘛呀，获取到我们这个鼠标的坐标吧，那怎么获取是不是我们这个事件对象啊，哎，实验对象啊，先来一个实验对象来我们这来干嘛呢？解决我们这个哎兼容问题，兼容问题直接来一个even event等于个even，或者是一个window.event兼容性问题，然后鼠标坐标两个，一个是Y一个这个X等于一个这个event点一个可LANXX实际上是不是就相当于我们这个水平坐标，水平坐标咱们起跟这个样式一样嘛，直接叫一个left啊left，然后Y一个这个top是我们这个垂直坐标，哎，Top等于什么呢？等于一个引万点，一个可LAN一个Y，现在可LANX可兰Y，咱们是不是都有了呀。

一个live的一个top，那接下来呢，我们是不是要设置我们这个div的坐标啊，诶设置我们的div的一个是不是就是有那个偏移量啊，诶偏移量直接来个box1.1个style.left等于left，是不是这样写啊，行不行，这是诶那我现在要设置我这个鼠标坐标，我是不是在，我是不是要将它的这个位置和鼠标的位置是不是放在一起啊，那我要移动它的位置，我得设置什么呀？设不是水设置它的这个偏移量啊，设置偏移量，它的偏移量是不是就是live的属性呀，我将它的live的属性和鼠标的这个X设成一样是不是行了，诶设成一样行了，然后呢，Left等于left，然后再来什么呢？Box1.1个style，但是注意啊，点一个top等于top。

都设置完了呀，注意这么写行不行。Life是个什么呀？是个数值吧，它有没有单位啊，没有单位吧，所以少谁呀？哎，是不是少了一个这个PX啊，哎，所以这块你要注意给它加上一个单位，是这个PX，诶我一刷新咱们来看看，刷新走你走你，哎哟他怎么不动啊，难道是这个样式没有设置上吗？我们来看看啊，选中这个元素我这移动诶。

有了是吧，Life的是61PX top是49PX，是不是偏移量设置上了呀，但是发现那div它它不动，为什么不动，诶我们说了你设置偏量它只对什么起作用，是不是只对这个开启定位，S你的div box1开启定位了吗？没有，所以如果你希望它这个偏量启动，一定注意一定要先干嘛呀，诶开启我们这个BOX1的这个绝对定位，当然你开启相应定位也行，但是我们这个它这位置我不用给他留着，直接来一个这个position，来一个a salute一定不要忘了啊，你要想设置位置，一定要给它开启绝对定位啊开启绝定位，但是一般你开启相对也行，开启固定也行，但是一般情况下，我们都是设置这个绝对啊，绝对定位保存，我们就来看刷新走你诶。这个时候就跟着我动起来了，哎，跟着我鼠标动起来，实际上就是干嘛呀，就是将我们这个鼠标坐鼠标坐标和我们这个div的偏移量是不是设置的一样就行了呀，诶样行，但是这有没有啥问题，的确能动了是吧？但是问题你看我不敢往左走，不敢往左走为啥呢？乐是不是不动了呀？这这就很奇怪了是吧，只能往下走，为啥往下走呢？很有意思是吧？你往上走就不动了是吧？只能往一个方向走，这是为啥呀？嗯，我这事件我是给谁绑定的呀？事件是给BOX1绑定的，换句话说，我这个事件只有当我鼠标在BOX1里边移动的时候，是不是才会触发呀？诶那就好了，那带来一问题了，我这随便往上一移，是不是就移出BOX1了，移出BOX1还会不会触发这个事件了，不会触罚，不会触发他是不是就不跟着移动了，所以这块呢，给BOX1绑定的是一个错误的决定，因为什么呀，你BOX1范围是不是太小了呀，稍微移是不是就移脱呀，哎，稍微移。

给移出来，那这东西给谁绑定给bos绑定不行了，那怎么办？哎，给boss给那大一点的谁呀，整个文档吧，哎，文档包底还小点，还大点就是文档了，整个我们这个document，整个页面是不是都是document呀，哎，所以我们说了，你再怎么移你也移不出这个document，所以最简单的方式把这个事件绑定给谁呢？绑定给document啊，所以注意直接来一个document，点一个on mouse，嗯，一保存，一刷新这个再看。

啊说行了呀，诶你怎么移，是不是也在这个网页里移呢？哎，他就可以跟着你去走了，你去哪呢？他要跟你去哪看看甩不掉是吧？诶怎么甩，甩不掉是吧？哎不甩不掉，好，这功能我们就实现了是吧，但是这里边还是实现是实现了，我们要看看它有没有什么问题啊，有没什么问题，现在我们这页面比较简单，就这么一个简单的页面，那我有的时候干嘛呢？我可能这个什么呀，我给body来给它设置一个什么呀，弹给body来一个hat hat来什么呢？来一个1000个像素，我是不是让body变得高一些的，Body变高了就有一个问题了，BODY1高我这是不是出现。

滚动条的呀，哎，滚动条了，来把这滚动条呢，往下拖一点。诶。发现什么问题了吗？我这鼠标是跑下边来了，诶咱们再来看看，再往下挪一点。是不是更往下了，诶把空调再往下挪一点。完了，俩人距离产生美了是吧？过不去了，诶为啥过不去，这俩人老是保持这么一段距离，这是为啥呀？如果你要眼睛尖的话，其实他们之间这段距离应该正好是我们这个什么呀，是不是这段距离啊，哎，滚条一个距离，那这是为什么呢？这是为什么呢？我们来说一下啊，来说一下这个东西，我们用了一个这个X client X y是用于获取我们这个鼠标的坐标是吧？嗯，Client X和这个CY它是干嘛的呢？嗯，它是用于获取我们这个鼠标在我们这个当前的这个可见窗口的这个什么呀？坐标啊，当前的可见窗口坐标什么意思？我这个可兰，哎，我把这关上啊，我的这个可兰X可Y指的什么呢？指的是我鼠标在这个窗口里边的这个坐标，它总是相对于这个什么呀，可见窗口什么意思。

啊，也就是说我这个点对于我的鼠标来说，它总是什么呀，总是00点啊，左上角这个点对于鼠标来说，它总是00点，那它就像一个什么呢？我们来看啊，这里边儿我们直接来画个图，这块呢，我画一个这个一个红色的，一个咱们画一个蓝色的吧，蓝色的。表示我们这个网页这个呢，是我们网页的一个可见。可见窗口，可见窗口有了，但是我们说实际上我们这个网页它是不是比我这窗口要大一些啊，诶我再来一个什么呢？来一个红色的，哎，表示我们这个网页实际上哎哟都变红了是吧。

里边先拖吧，拖出来一个。这个呢，我来一个蓝色吧，咱们换一个。诶，那现在呢，我这个红色的表示我的表示的是我这个浏览器的一个窗口，而且蓝色的呢，表示的是什么呀，是我的整个网页，也就是说我整个网页实际上是不是比我这个浏览器窗口要要大呀，哎，它要大一些啊大一些，那我们来说了，我们的这个可LANX鼠标坐标它是什么呢？它是相对于什么呀，可见窗口的，也就是说它是相对于什么呀，我这个红色这块的能理解吗？哎，红色这块它永远是相对于这个块的，也就是说这个点对于它来说永远都是什么呀，00点，那即使你通过滚动条把这东西往上拖了，往上拖了是不是整个应该往上挪了呀，那对于我们这个兰X来说，这点也是什么呀，00点啊，这个点永远都是00点，一定注意啊，它是相对于这个可见区域来算这个坐标的啊，那再说回来。

那我再来看谁呢？那我们这div呢，我们div的这个偏量它是怎么算的呀，我们这是一个绝对定位是吧？哎是什么呢？是相对于我们这个整个页面的啊，相对于整个页面，那我们div相对于谁呀？是不是相对于这个蓝色这部分呀，所以对于div说00点跟哪是不是跟这啊，哎，你这东西往下挪了，我00点是不是还是在这个页面这块啊，你再往下挪可能还是往，但是往下挪不了，只能往上挪，往上挪它是不是还在这儿啊，往上挪。它是不是还在这啊，哎，还在这儿，所以它们俩相对东西不一样，我们的这个什么呀，我们的这个鼠标是相对于这段，而我们这个div是相当于什么呀？相对于外边这块了吧？哎，那就来问题了，好，那你看当我出现滚动条的时候，往下一出现滚动条，那么就还拿举例子，我现在鼠标放在这，这是不是就是我的鼠标00点呀，但是对于div，它的零点跟哪了，是不是跟上边的呀？所以他们之间是不是产生了这么一段距离呀？哎，这么一段距离，这段距离正好是什么呀？

正好是我这个滚动条滚动这个距离吧，哎，滚动这个距离，那这问题它怎么解决呢？你固定定位呢，对固定定位也行，但是那个招呢，也不算太完美是吧，咱们有没有其他办法。诶，咱们来看看，那你现在这个可LANX是相对于这个什么呀窗口的，那我找一个什么呀，相对于整个页面不就行了吗？诶那么还有一个什么呢？除了client X还有一个叫做配置X，叫做一个这个诶配置外，诶配置什么呀，页面，那这个就是什么呢？这个是我们这个鼠标相对于这个页面的坐标啊，所以这块注意我们叫什么呢？叫做配置X和这个配置Y可以什么呢？可以获取我们鼠标相对于我们这个当前页面的这个图标，哎，所以我就改一个，改完了以后我们来看效果，这回你一刷新走你。

还有没问题了，是没问题了，滚条，你再往下滚是不是也没问题了？哎，很完美啊，再来看看我们的入，还是往下拖没问题吧，哎，都是没问题的啊，再来看谁呢？看我们这个阿姨。容易出问题。IE呢，他不太好好意思出来是吧，快点，哎出来了，IE11没问题吧，没问题，来看看我们这个爱九。没问题是吧，他来看我们IE8 ie8来走，你看报了17个词啊，告诉你什么呀，参数无效第几行呢？46行，46行那肯定是刚才我们，诶还不是刚改那行。

是在这啊，那证明这live的top是不是还获取到了呀？诶获取到咱们看看它值多少，直接来什么呢？来一个alert，一个life，我一保存，咱们来看在IE8里边啊，我一刷新移动。安利饭安利范呢，换句话说是不是就就没获取着啊，哎，没获取着啊，所以注意这两个字非常好用啊，非常好用，但是它有个小毛病，但是这两个属性在我们这个IE8中呢，它不支持诶不支持，也就说I叶八呢，压根就不认识这个，所以如果什么呢？所以如果需要兼容我们这个艾叶八则什么呢？则不要使用啊，如果建A8你就不能用这个配置，X你还得换谁谁呢？诶X那完了说半天这么热闹是吧，又没法用了，那当然你要不建出A巴你就可以放心的用是吧？来咱们再看一刷新，那完了这是不是又距离产生美了是吧，那老师拉这么一段距离啊呦呵。

呃，你往上调一点能好一点是吧，那这块怎么办呀？诶那咱们现在来看啊，咱们现在举个例子，咱们拿00点举例子，我这块呢，画一个这个点，画一个点黄色点表什么呢？表示我这个鼠标，现在我鼠标是不是在这个距离啊，那我这个div呢，它应该是在什么呀。是不是在这个距离啊，因为这个点对于div来说才是00点吧，而鼠标对于鼠标来说是不是这个点是00点呀，那我一想那我干嘛呢？那我现在是不是希望它们两个点是重合的呀？哎，那我干嘛呢？我把这个div整个往下挪是不是行了呀？哎，往下挪挪多少啊，是不是挪这段距离啊，诶那这段距离是什么呀？诶这段距离是不是正好是我们这个垂直滚动条滚动的那个距离啊，滚动那个距离也就是谁呀，是不是死棍套呀，我把这一段距离干嘛呢？加到它那个垂直偏移量上，那这div是不是就往下挪了呀，它往下挪是不是就。

就跑这来了，能看懂吧，哎把D往下挪这段距离是不是就OK了呀，那这段距离呢，就是我们这什么呀块套，诶那我们来看看怎么求这个score top，那这score top我们来看看我要求的是是这个是吧，诶scop，那我要求他我得先搞清楚它这个score top它是。是谁的吧？哎，是谁的，那我们来看看这个是谁的，你觉得这应该是谁的，感觉应该是是包的是吧？哎，是包的，那我来看看吧，这里边直接获取一个获取我们这个鼠标这个什么呀，这个滚动条滚动的一个距离，直接来一个，我们先求这个top，直接把一个top ST等于什么呢？诶怎么获取包点document点点一个一个，这是不是垂直量，哎，然后呢，我直接点一个log，一个ST，我们先输出一下看看，直接F12，我这控制台刷新一下，一移动零零，对了，没移动是吧，往下一走。

完了。是不是没获取到啊，诶，那证明包是不是好像他这滚动条，他应该认为它。不是body的吧，我这块是写的这个。Super top吧，诶top，但是他却呢，没有获取到，诶没有获取到，来看看其他浏览器F12，我这一刷新，哎哟。哎哟。看见，看见书了吗？

看清了吧，也就说这个东西在ome里边是。好使了吧，哎，Chrome里好使了啊，所以这块注意我们说什么呢？咱们先写一下我们这个，诶ch RO me Chrome干嘛呢？诶认为我们这个什么呀，浏览器的这个滚动条是谁的呢？是我们这个body的，诶可以什么呢？可以通过我们这个body点点一个k pop来干嘛呢？诶来获取啊，来获取就是什么呢？我们cru认为什么呀，这个东西就是body的，你可以通过body璃来获取啊，波璃来获取，诶但是呢，明显火狐是不是这么认为的，不是，是不是他没获取到啊，诶没获取到，那看看我们这个IE吧，IE我这一刷新。AIE也很争气。是不是也没有啊，哎，也没有，所以没获取到，哎，那我们想想，咱们先想想这滚条你说是应不应该是body的，从道理上来讲应该是body，我这高度是不是就是给body的呀，包整个高度它就是什么呀，1000PX是什么呀？是它的负元素容不下它才导致出现滚动条的吧，所以道理上讲，这滚动条它不应该是谁的呀。

是包的，因为包Y是子元素吧，应该是包Y的负元素吧，包Y的元素谁呀？是不是HT啊，诶那我们来说一下我们的什么呢？我们的这个火狐火狐等浏览器认为什么呢？认为我们这个滚动条，诶认为我们这个浏览器的这个滚动条是谁的呢？是我们这什么呀，HTM毛的，那我怎么获取音牌的住了呗，来一个一个S等于什么呀，点点一个块，哎，这是不是就是获取那个，诶诶秒更不了它那个滚动条的距离啊哎，我这一保存，咱们再看一刷新。

是不是有了，往下一挪走，你是不是也有了呀？哎，看这这个IE1刷新是不是也有了，往下一挪是不是也有了，哎，就都获取到了，诶但是来看看我们这个group。完了，Cru是不是又不给面了？哎，总是有一个不给你面子是吧？哎，总是有一个不给你面子，那问题来了，这个是我们这个什么呀？P的这个是我们的这个什么呀？哎，这个火狐的是吧，诶其他两器的，那这块我要怎么办呀？这这这两个你你要兼，要不然都得兼容是吧，要不然你就只能兼容一个，那怎么办呢？用哪个。是不是还得处理一下兼容性问题啊，那选哪个呀，哪个有咱们是不是就用哪个呀，那怎么办呢。

这能看懂吗？诶，ST等于do上面的点body score.score typeb，如果你有你就用它，如果它没有呢，是不是用后边那个呀？哎，哪个有你就用哪个，这个能明白吧？好，ST这个距离我们求出来了，求出来以后呢，也就是说我们已经干嘛了，我是不是已经把这段距离给求出来了，那接下来呢，我是要把这段距离加给谁呀？是不是加给我们div的那个垂直偏移量啊，所以我们来看这直接在这儿加行，在这加也行，咱们就在这加吧，加上一个谁呢？加上一个，诶不是这是left啊，加上这个top，我们加上什么呀？加上一个ST是不是就OK了呀？再来看我这一刷新走，你是不是就没事了呀？即使有滚动条，它这是不是也也没问题了，哎，也没问题了啊，这块我们就。OK了，但是他得还得挺好玩是吧，还得还得追一下啊追一下啊，但是这块呢，就没有问题了啊，没有问题了，来看G1刷新是不是也OK啊，哎，再看我们这个艾叶艾E8是不是也没问题了，哎，也没问题了啊好，那这个呢，是我们说的这个垂直滚动条，那垂直完了还有个问题谁呢？水瓶吧，水瓶来一个这个2000个像素，我这一保存一保存，咱们来看效果一刷新水瓶是不是出来了往这挪。

哎，是不是又一段距离是吧？哎，这么设计的很好是吧？哎，所以这里边我们还有干嘛呀，是不是把那个score left。也求出来呀，怎么办呀，复制一个这叫做一个SL，这就是什么呀，死磕一个left，这个也是一个死磕一个left，还是这个东西有谁你就用谁吧，哎，死磕一个这个left有谁你就用谁啊然后我们这直接改成干嘛呀，是不再加上一个SL，再一加是就OK了呀，再来看刷新是不是这也没问题了，哎这也没问题了啊好，那这一块呢，我们就完成了，再看看其他浏览器，诶chome也OK了啊，也OK了，然后我们这个IEIE8。

这就没问题了，即使有滚动条，它也可以跟随着去移动了，啊位置也是正常的啊，位置也正常的好，那这个呢，是我们说这个鼠标跟随我们这D移动，整体来说不难，但是这一块你要去理解一下这个距离是怎么算出的，这个图呢，最好自己去尝试去画一下啊，自己尝试画一下来停一下。