从零开始学 Web 之 BOM（四）client系列
大家好，这里是「 从零开始学 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); // 300
console.log(my$("dv").clientHeight); // 200
console.log(my$("dv").clientLeft); // 20
console.log(my$("dv").clientTop); // 20
console.log(my$("dv2").clientWidth); // 100
console.log(my$("dv2").clientHeight); // 50
console.log(my$("dv2").clientLeft); // 15
console.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="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="images/Daotin.png" id="im">
<script src="common.js"></script>
<script>
var evt = {
// 获取通用事件对象
getEvent: function (e) {
return window.event||e;
},
// 获取通用ClientX
getClientX: function (e) {
return this.getEvent(e).clientX;
},
// 获取通用ClientY
getClientY: function (e) {
return this.getEvent(e).clientY;
},
// 获取通用 scrollLeft
getScrollLeft: function () {
return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
},
// 获取通用 scrollTop
getScrollTop: function () {
return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
},
// 获取通用 pageX
getPageX: function (e) {
return this.getEvent(e).pageX?this.getEvent(e).pageX:this.getClientX(e)+this.getScrollLeft();
},
// 获取通用 pageY
getPageY: 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="images/dos.jpg" alt="">
<div class="mask"></div>
</div>
<div class="big">
<img src="images/window.jpg" alt="">
</div>
</div>
<script src="common.js"></script>
<script>
// 获取所有需要的元素
var boxObj = my$("box");
// 获取 small
var smallObj = boxObj.children[0];
// 获取 mask
var maskObj = smallObj.children[1];
// 获取 big
var bigObj = boxObj.children[1];
// 获取 bigImg
var 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>
// 获取所有的元素
// 获取 box
var boxObj = my$("box");
// 获取 content
var conObj = boxObj.children[0];
// 获取 right box
var rightObj = boxObj.children[1];
// 获取 bar
var 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系列的更多相关文章
- 从零开始学 Web 之 BOM（一）BOM的概念，一些BOM对象
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 BOM（二）定时器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 BOM（三）offset，scroll，变速动画函数
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
- 从零开始学 Web 之 CSS（四）CSS初始化、定位、overflow、标签规范
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 Ajax（四）接口文档，验证用户名唯一性案例
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 CSS3（四）边框图片，过渡
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 ES6（四）ES6基础语法二
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 ES6（六）ES6基础语法四
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
随机推荐
- related_name和related_query_name举例区别
例1: class UserInfo(models.Model): nickname = models.CharField(max_length=32) username = models.CharF ...
- 线程属性 pthread_attr_t
参考资料: https://blog.csdn.net/hudashi/article/details/7709413 Posix线程中的线程属性pthread_attr_t主要包括scope属性.d ...
- SQL里执行CLR c#代码
这里只说一个重点: 1.直接在sql里执行clr代码的时候,sql还是会报错 说没有启用 clr 执行以下代码才会起作用 EXEC sp_configure 'clr enabled', 1; RE ...
- 1.5eigen中高级初始化
1.5 高级初始化 这一节讨论一些初始化矩阵的高级方法. 1.The comma initializer eigen提供一个简单设定所有矩阵系数.向量.数组系数的初始化语法,从左上角开始到右下角结束. ...
- centos7 编译安装nginx+tcp转发
一.依赖 1. gcc 安装安装 nginx 需要先将官网下载的源码进行编译,编译依赖 gcc 环境,如果没有 gcc 环境,则需要安装: yum install gcc-c++ 2. PCRE pc ...
- form表单保存和取出
function saveConfig() { var configName = document.title; if (!localStorage) return; var Config = {}; ...
- 从MATLAB到FPGA 视频和图像处理——讲座学习小结（视频地址https://ww2.mathworks.cn/videos/from-matlab-to-fpga-video-and-image-processing-102492.html）
1.HDLcoder产品介绍 图像处理分为两个部分: 这里主要讨论第一部分图像处理部分. 一般产品设计流程如下: 适用人群有以下两类: 这里先用一张slider来进行整体概括: 基于模型的设计的好处— ...
- dubbo实现示例
创建MAVEN项目 项目结构: 在项目pom.xml中添加依赖 <dependency> <groupId>org.apache.zookeeper</groupId&g ...
- VS工具栏没有出现可用工具的情况
(1)没有切换到资源视图,打开具体的对话框. (2)如果你在调试状态,即使打开了具体的对话框,VS工具箱还是不会出现可用的控件的.所以不要在调试状态下添加控件.
- 【转】再有人问你Http协议是什么，把这篇文章发给他
一.HTTP简介 1.HTTP协议,即超文本传输协议(Hypertext transfer protocol).是一种详细规定了浏览器和万维网(WWW = World Wide Web)服务器之间互相 ...