大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公众号：Web前端之巅 博客园：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！ 一、client 系列 clientWidth：可视区域的宽度（不含边框） clientHeight：可视区域的高度（不含边框） clientLeft：左边框的宽度 clientTop： 上边框的宽度 clientX：可视区域的横坐标 clientY：可视区域的纵坐标 1、案例：图片跟着鼠标移动最终版 之前图片跟着鼠标移动的案例有些bug，就是IE8不支持。 在IE8 下 没有事件参数，但是有 window.event 可以代替。 window.event： 谷歌， IE8 支持，但是火狐不支持。 这个时候，如果 body 的高度/宽度变化了，可以滚动滑轮了会怎样呢？ body { height: 5000px; } 这时候，如果鼠标不动，只滚动滑轮的话，会发现图片会距离鼠标原点越来越远。为什么呢？ 因为当我们滚动滑轮的时候，鼠标距离页面顶部的距离改变了，但是 clientY 是可视区域的大小，滚动滑轮的时候， clientY 的大小是没有变的，但是鼠标距离页面顶部的距离改变了，而图片在 Y 轴的距离计算还是按照 clientY 计算的，所以图片就会距离鼠标越来越远。 那么，怎么办呢？ 事件参数 e 有连个属性：pageX,pageY 是距离页面顶部边界的距离，可以直接使用，但是不幸的是，IE8 又不支持。看来，只能是鼠标移动的距离 + 滑轮卷曲出去的距离来实现了。 思路： 之前我们封装的兼容代码都在一个函数里面，这里我们封装到一个对象 evt 里面。 这个 evt 对象封装了所有浏览器都支持的关于 clientX,clientY 等页面坐标的函数。 图片跟着鼠标移动的最终版： 2、案例：淘宝宝贝放大镜 第一步：获取所有需要的元素对象。 第二步：鼠标进入，离开小图，显示和隐藏遮挡层和大图。 第三步：遮挡层随着鼠标的移动而移动。 第四步：遮挡层移动的最大范围在小图内。 第五步：小图移动的距离/小图能移动的最大距离 == 大图移动的距离/大图能移动的最大距离，由此算出大图移动的距离 = 小图移动的距离 * 大图能移动的最大距离 / 小图能移动的最大距离。 第六步：将得到的大图移动的距离的负值赋值给大图即可。 3、案例：DIY 滑动栏 1、获取所有需要的元素。 2、鼠标点击，滑动，抬起，三个事件。 3、鼠标点击的时候获取鼠标的位置。 4、鼠标滑动的时候计算坐标 y。由于要保证鼠标移动的时候，鼠标相对滑动条顶部的距离一定，所以需要 spaceY。还需要注意滑动条滑动的范围。 5、鼠标抬起的时候，清除鼠标移动的事件。 6、防止滑动的时候选中了文字 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 7、通过比例，计算 content 内容反方向移动的距离。 二、复习 1、元素隐藏的不同方式 my$("dv").style.display = "none"; // 不占位 my$("dv").style.visibility = "hidden"; // 占位 my$("dv").style.opacity = 0; // 占位 my$("dv").style.height = 0; // 占位https://www.cnblogs.com/lvonve/p/9239574.htm