大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......

  • github：https://github.com/Daotin/Web
  • 微信公众号：Web前端之巅
  • 博客园：http://www.cnblogs.com/lvonve/
  • CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、client 系列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#dv {width: 300px;height: 200px;border: 20px solid purple;margin-top: 50px;margin-left: 100px;}#dv2 {width: 100px;height: 50px;border: 15px solid #e88e1d;margin-top: 20px;margin-left: 30px;}</style>
</head>
<body>
<div id="dv"><div id="dv2"></div>
</div>
<script src="common.js"></script>
<script>console.log(my$("dv").clientWidth); // 300console.log(my$("dv").clientHeight); // 200console.log(my$("dv").clientLeft); // 20console.log(my$("dv").clientTop); // 20console.log(my$("dv2").clientWidth); // 100console.log(my$("dv2").clientHeight); // 50console.log(my$("dv2").clientLeft); // 15console.log(my$("dv2").clientTop); // 15
</script>
</body>
</html>

clientWidth：可视区域的宽度（不含边框）

clientHeight：可视区域的高度（不含边框）

clientLeft：左边框的宽度

clientTop： 上边框的宽度

clientX：可视区域的横坐标

clientY：可视区域的纵坐标

1、案例：图片跟着鼠标移动最终版

之前图片跟着鼠标移动的案例有些bug，就是IE8不支持。

在IE8 下 没有事件参数，但是有 window.event 可以代替。

window.event： 谷歌， IE8 支持，但是火狐不支持。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
    <style>
        img {            position: absolute;
        }
    </style>
</head>
<body>
<img src="data:images/Daotin.png" id="im">
<script src="common.js"></script>
<script>
    document.onmousemove = function (e) {        // 获取鼠标的横纵坐标
        e = window.event || e;
        my$("im").style.left = e.clientX + "px";
        my$("im").style.top = e.clientY + "px";        console.log(window.event);
    }
</script>
</body>
</html>

这个时候，如果 body 的高度/宽度变化了，可以滚动滑轮了会怎样呢？

body {height: 5000px;
}

这时候，如果鼠标不动，只滚动滑轮的话，会发现图片会距离鼠标原点越来越远。为什么呢？

因为当我们滚动滑轮的时候，鼠标距离页面顶部的距离改变了，但是 clientY 是可视区域的大小，滚动滑轮的时候， clientY 的大小是没有变的，但是鼠标距离页面顶部的距离改变了，而图片在 Y 轴的距离计算还是按照 clientY 计算的，所以图片就会距离鼠标越来越远。

那么，怎么办呢？

事件参数 e 有连个属性：pageX,pageY 是距离页面顶部边界的距离，可以直接使用，但是不幸的是，IE8 又不支持。看来，只能是鼠标移动的距离 + 滑轮卷曲出去的距离来实现了。

思路：

之前我们封装的兼容代码都在一个函数里面，这里我们封装到一个对象 evt 里面。

这个 evt 对象封装了所有浏览器都支持的关于 clientX,clientY 等页面坐标的函数。

图片跟着鼠标移动的最终版：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {height: 5000px;}img {position: absolute;}</style>
</head>
<body>
<img src="data:images/Daotin.png" id="im">
<script src="common.js"></script>
<script>var evt = {// 获取通用事件对象getEvent: function (e) {return window.event||e;},// 获取通用ClientXgetClientX: function (e) {return this.getEvent(e).clientX;},// 获取通用ClientYgetClientY: function (e) {return this.getEvent(e).clientY;},// 获取通用 scrollLeftgetScrollLeft: function () {return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;},// 获取通用 scrollTopgetScrollTop: function () {return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;},// 获取通用 pageXgetPageX: function (e) {return this.getEvent(e).pageX?this.getEvent(e).pageX:this.getClientX(e)+this.getScrollLeft();},// 获取通用 pageYgetPageY: function (e) {return this.getEvent(e).pageY?this.getEvent(e).pageY:this.getClientY(e)+this.getScrollTop();}};document.onmousemove = function (e) {my$("im").style.left = evt.getPageX(e) + "px";my$("im").style.top = evt.getPageY(e) + "px";}
</script>
</body>
</html>

2、案例：淘宝宝贝放大镜

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}/*#box {*//*width: 100%;*//*height: 100%;*//*background-color: lightpink;*//*}*/.small {float: left;width: 384px;height: 240px;margin-top: 50px;margin-left: 50px;}.mask {width: 128px;height: 80px;background-color: yellow;opacity: 0.4;position: absolute;margin-top: 50px;margin-left: 50px;left: 0;top: 0;cursor: move;display: none;}.big {width: 640px;height: 400px;float: left;margin-left: 50px;overflow: hidden;display: none;}</style>
</head>
<body>
<div id="box"><div class="small"><img src="data:images/dos.jpg" alt=""><div class="mask"></div></div><div class="big"><img src="data:images/window.jpg" alt=""></div>
</div>
<script src="common.js"></script>
<script>// 获取所有需要的元素var boxObj = my$("box");// 获取 smallvar smallObj = boxObj.children[0];// 获取 maskvar maskObj = smallObj.children[1];// 获取 bigvar bigObj = boxObj.children[1];// 获取 bigImgvar bigImgObj = bigObj.children[0];// 鼠标进入，显示遮挡层和大图smallObj.onmouseover = function () {maskObj.style.display = "block";bigObj.style.display = "block";};// 鼠标退出，隐藏遮挡层和大图smallObj.onmouseout = function () {maskObj.style.display = "none";bigObj.style.display = "none";};// 遮挡层跟着鼠标移动，使鼠标位于遮挡层中央smallObj.onmousemove = function (e) {var x = evt.getClientX(e) - parseInt(maskObj.offsetWidth / 2)-50; // 这50是遮挡层初始偏移left的距离var y = evt.getClientY(e) - parseInt(maskObj.offsetHeight / 2)-50;// 这50是遮挡层初始偏移top的距离// 遮挡层的最小移动范围x = x < 0 ? 0 : x;y = y < 0 ? 0 : y;// 遮挡层的最大移动范围x = x > smallObj.offsetWidth - maskObj.offsetWidth? smallObj.offsetWidth - maskObj.offsetWidth: x;y = y > smallObj.offsetHeight - maskObj.offsetHeight? smallObj.offsetHeight - maskObj.offsetHeight: y;maskObj.style.left = x + "px";maskObj.style.top = y + "px";// 小图移动的距离/小图能移动的最大距离 == 大图移动的距离/大图能移动的最大距离// 大图移动的距离 = 小图移动的距离 * 大图能移动的最大距离 / 小图能移动的最大距离；var bigImgX = x * (bigImgObj.offsetWidth - bigObj.offsetWidth) / (smallObj.offsetWidth - maskObj.offsetWidth);var bigImgY = y * (bigImgObj.offsetHeight - bigObj.offsetHeight) / (smallObj.offsetHeight - maskObj.offsetHeight);bigImgObj.style.marginLeft = -bigImgX + "px";bigImgObj.style.marginTop = -bigImgY + "px";};
</script>
</body>
</html>

第一步：获取所有需要的元素对象。

第二步：鼠标进入，离开小图，显示和隐藏遮挡层和大图。

第三步：遮挡层随着鼠标的移动而移动。

第四步：遮挡层移动的最大范围在小图内。

第五步：小图移动的距离/小图能移动的最大距离 == 大图移动的距离/大图能移动的最大距离，由此算出大图移动的距离 = 小图移动的距离 * 大图能移动的最大距离 / 小图能移动的最大距离。

第六步：将得到的大图移动的距离的负值赋值给大图即可。

3、案例：DIY 滑动栏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}#box {width: 200px;height: 300px;border: 1px solid red;margin-top: 100px;margin-left: 300px;overflow: hidden;}.content {float: left;width: 180px;/*height: 900px;*/}.right {float: left;width: 20px;height: 300px;background-color: #e7e7e7;position: relative;}.bar {position: absolute;left: 0;top: 0;width: 12px;height: 50px;margin: 0 4px;background-color: #7b7b7b;/*cursor: pointer;*/}</style>
</head>
<body>
<div id="box"><div class="content">kkkkkk温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！温馨提示：由于厂商可能在未提前通知的情况下更改产品包装、产地、赠品或随机附件等。飞虎回复仅在回复当时对提问者有效，其他网友仅供参考！若由此给您带来不便敬请谅解，谢谢！Daotin</div><div class="right"><div class="bar"></div></div>
</div>
<script src="common.js"></script>
<script>// 获取所有的元素// 获取 boxvar boxObj = my$("box");// 获取 contentvar conObj = boxObj.children[0];// 获取 right boxvar rightObj = boxObj.children[1];// 获取 barvar barObj = rightObj.children[0];// 鼠标点击bar，拖动barObj.onmousedown = function (e) {var spaceY = evt.getClientY(e) - barObj.offsetTop; // 鼠标距离bar顶部的距离document.onmousemove = function () {var y = evt.getClientY(e) - spaceY;y = y < 0 ? 0 : y;y = y < rightObj.offsetHeight - barObj.offsetHeight ? y : rightObj.offsetHeight - barObj.offsetHeight;barObj.style.top = y + "px";// 防止滑动的时候选中了文字window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();// 鼠标移动的时候，content也应该移动// bar移动的距离/ bar可以移动的最大距离 = content移动的距离/ content可以移动的最大距离var contentY = y * (conObj.offsetHeight - boxObj.offsetHeight) / (rightObj.offsetHeight - barObj.offsetHeight);conObj.style.marginTop = -contentY + "px";};};document.onmouseup = function () {document.onmousemove = null;}// 鼠标离开
</script>
</body>
</html>

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; // 占位

从零开始学 Web 之 BOM（四）client系列相关推荐

  1. 从零开始学 Web 系列教程

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新-- github:https://github.com/Daotin/Web 微信公众号:前端队长 博客园:http://ww ...

  2. 从零开始学 Web 之 ES6（三）ES6基础语法一

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 从零开始学 Web 之 Ajax（七）跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  5. 从零开始学 Web 之 JavaScript（三）函数

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  6. 从零开始学 Web 之 JS 高级（二）原型链，原型的继承

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. 从零开始学 Web 之 移动Web（九）微金所案例

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  9. python画circos图_从零开始学CIRCOS绘制圈图(四)

    从零开始学CIRCOS绘制圈图(一) 从零开始学CIRCOS绘制圈图(二) 从零开始学CIRCOS绘制圈图(三) 通常circos的中间部分不是空白区域,会用一条条线进行连接,表示两个染色体部分区域有 ...

最新文章

  1. Hadoop集群的基本操作（四：Hive的基本操作）
  2. 周末都花费在智能车实验室，结果......
  3. Bytom移动端钱包SDK开发基础
  4. Mybatis如何打印sql语句
  5. Paddle.js PaddleClas 实战 ——『寻物大作战』AI 小游戏
  6. python做基本的图像处理
  7. maven的java工程取mysql数据库数据
  8. 如何固定最小宽度_如何使用更新的HTML和CSS函数创建响应式设计
  9. Oracle正则表达式的用法
  10. Fedora 17 结实的奇迹：最新的OpenStack和JBoss
  11. 漫画：为什么一到年底，部分网站就会出现日期混乱？
  12. 滚动监听 after选择器
  13. 多元高斯分布的边缘概率和条件概率
  14. 锁屏对对碰_锁屏应用
  15. CFA一级学习笔记--衍生品（一）--概念以及定义
  16. 记录String.valueOf()和toString()注意问题
  17. .net之微信企业号开发(二) 企业号人员身份认证与开发
  18. ubuntu设置相机为固定焦距
  19. 成都女孩子报Java语言培训班怎么样_Java好就业吗？
  20. 球的半径和体积：输入球的中心点和球上某一点的坐标，计算球的半径和体积

热门文章

  1. 黑马程序员——c语言学习心得——函数传递二维数组
  2. 通用Windows应用《博客园-开发者的网上家园》开发（1）——MVVM模式
  3. atitit.软件开发方法总结O6
  4. cocos2d-x游戏实例（5）-A星算法（1）
  5. IE不能為讀(written)問題解決(轉載)
  6. 12.6日个人工作总结
  7. JDBC进行简单的增删改查
  8. pxe+kickstart无人值守安装
  9. Yii::app()-request-getParam($name, $defaultValue)
  10. Selenium IDE安装