04-jQuery/14-尚硅谷-jQuery-练习：图片跟随

最后呢，我们使用这个试验对象啊，做个练习啊，看他怎么用啊，呃，我们找到个练习里面图片跟随这个啊，我们都很喜欢这个效果啊，把它运行起来，这喜欢不把鼠标移上来，这就更喜欢了，你看当你鼠标移动的时候啊，在这个小图片移动的时候，在大图片是不是跟着你跑呢？嗯，这个怎么做呢？我过来看看，好，但是你先观察一下它就有什么内容啊，先进来是不是显示图片，一旦图片里面移动的时候，它是不是跟着你动，一旦你出这个图片，它是不是就消失了，好有三个时件，一个是鼠标移入，一个是鼠标移出，一个是鼠标在里面移动，对吧？三个事件嘛，我们只要把这三个事件搞定就可以了，来我们看一下哈，我们找这个带下划线空白的，首先里面看看哈，我现在先运行一开始的时候，它是不是只有一个小图片啊。

啊，那么就上面那个看见了吗？Small这个吧，它还有个big大图片，你可以看见它在哪啊，它image里面有两个图片，一个是small小的，一个是big大的，看到啊，那现在我们是不是应该给这个small绑的事件的，他进来的时候和出去的时候，我是不是应该让这个大图片显示或隐藏，能理解吗？我给他绑上时间来啊，给这个small绑上啊点把呃，叫什么呢？Mouse over，空格，Mouse out，好，咱们先来疑问啊，现在呢，咱们要判断一下吧，如果你是鼠标移出，我让你消失，你进来我让你显示是吧？Mouse over，这时候干嘛？是不是显示啊，谁显示是ID这个大的知道吗？这大显示。

我先查到他。So，然后点搜它就显示了吗？那l if，如果你这个是出去的话，我就让你隐藏看见吧，我给你隐藏看是吧？好，先看看这个效果吧。刷新进来是不显示了，他在下面啊，进来显示出去，你看看到吧，啊，有同学老师这个跑那么远的就跑很远啊，没关系，咱们因为还没有设置它的坐标，还没设置它的坐标，怎么设置它的坐标呢？大家注意看一下，还记得有个方法吗？对这设置坐标的设置和获取坐标，咱们在什么时候设置和设置它坐标呢？在鼠标移动的时候，然后还要绑定一个事件，叫做mouse move。

移动啊，我给你绑绑啊L再写一个这个鼠标移动事件呢，触发的频率特别快，你稍微动一点点它就会触发了。来别着急啊，然后我在这里呢，打印一下好一份看见吧，哎，我现在运行一下，你稍微看处罚频率特别高，我就划一次，他处罚好多次走，你看稍微滑一次，你看下面都处罚了好多好多次，你看见了吗？每一次里面都会记录下这一次处罚时的这个坐标信息，他都会记录的啊，当他处罚很多次，那么我们只要在每次处发的时候啊，给它设置和坐坐标就可以了，他就可以跟你这个触发处发时的那个坐标箱应的移动。能理解吧，来你看一下啊，怎么做呀，在这里我们找到它。

点offet，这里面需要啥两个东西，Left top是吧，就跟我们讲先操作一样嘛，先不也是讲一个东西，你还有印象吗？是不是它呀，那就是它吗？来这里呢，我们看一下它LA是什么，LA是S轴向的值吧，就是横向纵向，横向是X什么，纵向是Y轴嘛，这个应该讲数学的时候就应该理解了哈，那这里呢，应该有两个值，你看啊。我随便打开一下配置X配置Y，看见吗？这俩值刚好能用，把它拿过来就是什么呢？一点配置X这个呢，一点配置Y好了，好，那我们看看效果吧，咱刷新一下走小是移的动了。啊，都跟水的吗？但是大家注意看。

我一直从右下角往左上角移动是没毛病的啊，但是如果我反过来，我跟你说眼睛都瞎了你是吧，谁受得了一直晃一直晃一晃，为啥咱们注意看看哈，我现在给你画一下为啥一直闪呢？来就是那个小的黄金啊。那我给你喷个颜色，然后呢，我再给你整个大的黄金的那个图片，就这个啊好，你仔细观察我这个鼠标在什么位置，是不是在大图片那个左上角那个位置啊，就差一点点看见了吗？你看啊，就是就在这个，诶就在就在这个位置看见了吗？我往左上角移动，那肯定在蓝色区域里没问题是吧？但是一旦我往右下角的时候看到不到了，对他就进入红色那个大的图片区域了，这个时候会发生什么事情呢？浏览器就会判定。觉得你已经离开了蓝色区域了，看见吗？当你离开了蓝色区域，它会触发什么事件呢？是不是直行out直线就没了，也就是说你看啊，你进入红色，红色马啊，对红色马上就消失，能理解吗？然后消失完你是不是又落进那个蓝色，那又开始显示能理解了吧？那你一直往右下角移动的时候，它就会显示闪，显示消息显示就会闪闪闪吧，那这个时候问题就在哪里？问题是不是我这个鼠标和大的图片的左上角太接近了，只要有一点点距离，我往右下角滑的时候，它不至于进入红色区域接触好了啊对，就加点内容对吧，加点内容就行了，呃，我们都加点内容，加个十吧。

都是甲，都是甲啊来走，你稍微看看这个值。又看见了吗？就有了，然后你在移动的时候，你看挨不上了哈，就挨不上了哈，诶没问题啊。