一.鼠标的坐标属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
// clientX、clientY 参照物是可视化区域的最左边和最上边
// 鼠标当前点击位置距离
// body可视区域的x，y坐标
// pageX、pageY 参照物是doucment
// (不会随着滚动条的滚动而改变)对于整个页面来说，包括了被卷去的body部分的长度,相对文档区域左上角距离
// screenX、screenY
// 点击位置距离当前电脑屏幕的x，y坐标
// offsetX、offsetY
// 鼠标相对于事件源元素的x,y坐标(光标相对于自身盒子内侧的坐标,不包括边框)
var box = document.getElementsByClassName("box")[0];
box.onclick = function (e) {
// console.log(e.clientX+"e.clientX");
// console.log(e.clientY + "e.clientY");
// console.log(e.pageY + "e.pageY");
// console.log(e.pageX + "e.pageX");
// console.log(e.screenX + "e.screenX");
// console.log(e.screenY + "e.screenY");
console.log(e.offsetX + "e.offsetX");
console.log(e.offsetY + "e.offsetY");
}
</script>
</body>
</html>
二.盒子跟着鼠标走
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.getElementsByClassName("box")[0];
// 事件
console.dir(box);
box.onmousedown = function(e) {
document.onmousemove = function(e) {
var _top = e.clientY - (box.clientHeight / 2);
var _left = e.clientX - (box.clientWidth / 2);
// console.log(1);
console.log(e.clientX);
console.log(e.clientY - box.clientHeight);
box.style.left = _left + "px";
box.style.top = _top + "px";
}
box.onmouseup = function() {
document.onmousemove = null;
}
}
</script>
</body>
</html>
三.元素的offset属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 300px;
height: 300px;
background-color: pink;
position: absolute;
}
.box2 {
width: 200px;
height: 200px;
margin: 20px;
border: 1px solid red;
padding: 10px;
/* box-sizing: border-box; */
position: absolute;
top: 400px;
}
</style>
</head>
<body>
<button>向右走</button>
<button>向左走</button>
<div class="box"></div>
<div class="box2"></div>
<script>
// offsetTop 元素相对父元素上边的偏移。(只读)
// offsetLeft 元素相对父元素左边的偏移。(只读)
var box = document.getElementsByClassName("box")[0];
var box2 = document.getElementsByClassName("box2")[0];
var _right = document.getElementsByTagName("button")[0];
var _left = document.getElementsByTagName("button")[1];
console.log(box.offsetTop);
_right.onclick = function() {
box.style.left = box.offsetLeft + 10 + "px";
console.log(box.offsetLeft);
}
_left.onclick = function() {
box.style.left = box.offsetLeft - 10 + "px";
console.log(box.offsetLeft);
}
// offsetWidth自身包括padding、边框、内容区的宽度。
// offsetHeight自身包括padding、边框、内容区的高度。
console.log(box2.offsetWidth);
// 查看当前元素的参照物
console.log(box.offsetParent);
</script>
</body>
</html>
四.元素的client属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 20px;
border: 10px solid red;
padding: 10px;
/* box-sizing: border-box; */
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
111111111111111111111111111111111111111111111111111111111111111111111111111
</div>
<script>
// clientHeight/clientWidth
// 内容可视区域的高度/宽度，也就是说页面浏览器中可以看到内容的这个区域的高度(不含边框，也不包含滚动条等边线)
var box = document.getElementsByClassName("box")[0];
console.log(box.clientHeight);
console.log(box.clientWidth);
// clientLeft/clientTop
// 可以查看当前元素的 边框厚度
console.log(box.clientLeft);
console.log(box.clientTop);
</script>
</body>
</html>
五.元素的scroll属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
margin: 20px;
border: 10px solid red;
padding: 10px;
/* box-sizing: border-box; */
overflow: auto;
}
</style>
</head>
<body>
<div class="box">
111111111111111111111111111111111111111111111111111111111111111111111111111
30日，记者从河北省水利厅获悉河北水利部门全力防范应对台风“杜苏芮”。据了解，河北遭遇持续强降雨。有网友喊话30日，记者从河北省水利厅获悉河北水利部门全力防范应对台风“杜苏芮”。据了解，河北遭遇持续强降雨。有网友喊话30日，记者从河北省水利厅获悉河北水利部门全力防范应对台风“杜苏芮”。据了解，河北遭遇持续强降雨。有网友喊话30日，记者从河北省水利厅获悉河北水利部门全力防范应对台风“杜苏芮”。据了解，河北遭遇持续强降雨。有网友喊话30日，记者从河北省水利厅获悉河北水利部门全力防范应对台风“杜苏芮”。据了解，河北遭遇持续强降雨。有网友喊话30日，记者从河北省水利厅获悉河北水利部门全力防范应对台风“杜苏芮”。据了解，河北遭遇持续强降雨。有网友喊话30日，记者从河北省水利厅获悉河北水利部门全力防范应对台风“杜苏芮”。据了解，河北遭遇持续强降雨。有网友喊话30日，记者从河北省水利厅获悉河北水利部门全力防范应对台风“杜苏芮”。据了解，河北遭遇持续强降雨。有网友喊话
</div>
<script>
var box = document.getElementsByClassName("box")[0];
// scrollTop\scrollLeft 返回被卷去的上\左侧距离返回的数值不带单位
box.onscroll = function () {
// console.log(this.scrollLeft);
console.log(this.scrollTop);
}
// scrollWidth\scrollHeight 返回自身的实际高\宽度 不包含边框
console.log(box.scrollWidth);
console.log(box.scrollHeight);
</script>
</body>
</html>
六.window的坐标属性
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 1200px;
height: 500px;
margin: 20px auto 0px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
// window.pageXOffset获取当前页面相对于窗口显示区左上角的 X 位置。（只读）
// window.pageYOffset获取当前页面相对于窗口显示区左上角的 Y 位置。（只读）
console.log(window.pageYOffset);
document.onscroll = function() {
console.log(window.pageYOffset);
}
// window.innerWidth返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度。(只读)
// window.innerHeight返回以像素为单位的窗口的内部高度。如果有水平滚动条，也包括滚动条高度。(只读)
console.log(window.innerWidth);
console.log(window.innerHeight);
</script>
</body>
</html>
七.楼层导航（案例）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
ul,
li {
list-style: none;
}
.header {
width: 100%;
height: 70px;
background-color: black;
}
.banner {
width: 100%;
height: 600px;
background-color: pink;
line-height: 600px;
text-align: center;
font-size: 100px;
font-weight: bold;
color: white;
}
.floor {
text-align: center;
font-size: 100px;
font-weight: bold;
color: white;
}
.floor {
width: 100%;
}
.appliances {
background-color: skyblue;
}
.boot {
background-color: springgreen;
}
.phone {
background-color: purple;
}
.food {
background-color: orange;
}
.sidbar {
width: 50px;
height: 200px;
border: 1px solid #ccc;
position: fixed;
right: 20px;
top: 50%;
margin-top: -100px;
background-color: white;
display: none;
}
.sidbar ul {
width: 100%;
height: 100%;
}
.sidbar ul li {
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
margin-bottom: 1px solid #ccc;
}
/* 当前li的最后一个 */
.sidbar ul li:last-child {
border-bottom: 0px;
}
.active {
background-color: red;
color: white;
}
.content {
width: 100%;
height: 1500px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="banner">
轮播图
</div>
<div class="floor appliances">
家用电器
</div>
<div class="floor boot">
鞋靴箱包
</div>
<div class="floor phone">
手机数码
</div>
<div class="floor food">
食品零食
</div>
<div class="sidbar">
<ul>
<li class="item active">电</li>
<li class="item">鞋</li>
<li class="item">数</li>
<li class="item">食</li>
</ul>
</div>
<div class="content"></div>
<script>
// 统一给所有的floor 设置一屏的高度 也就是window.innerHeight
var floor = document.getElementsByClassName("floor");
var items = document.getElementsByClassName("item")
var sidbar = document.getElementsByClassName("sidbar")[0]
var content = document.getElementsByClassName("content")[0]
for (var i = 0; i < floor.length; i++) {
floor[i].style.height = window.innerHeight + "px";
}
// window.pageYoffset 滚动条滚动的 距离
// element.offsetTop 当前元素距离 父元素 的距离 （元素相对父元素上边的偏移）
// console.log(floor[0].offsetTop);
// console.log(floor[1].offsetTop);
// console.log(window.pageYOffset);
// 排他思想
function siblings(ele, name) {
for (var i = 0; i < ele.length; i++) {
ele[i].className = name;
}
}
// document.onscroll = function () {
// if (window.pageYOffset >= floor[0].offsetTop && window.pageYOffset < floor[1].offsetTop) {
// sidbar.style.display = "block";
// // 当前处于家用电器位置
// siblings(items, 'item');
// items[0].className = "item active";
// } else if (window.pageYOffset >= floor[1].offsetTop && window.pageYOffset < floor[2].offsetTop) {
// // 当前处于鞋靴箱包位置
// siblings(items, "item")
// items[1].className = "item active";
// } else if (window.pageYOffset >= floor[2].offsetTop && window.pageYOffset < floor[3].offsetTop) {
// // 当前处于鞋靴箱包位置
// siblings(items, "item")
// items[2].className = "item active";
// } else if (window.pageYOffset >= floor[3].offsetTop) {
// // 当前处于鞋靴箱包位置
// siblings(items, "item")
// items[3].className = "item active";
// }else{
// sidbar.style.display = "none";
// }
// }
document.onscroll = function () {
for (var k = 0; k < floor.length; k++) {
floor[k].index = k;
if (window.pageYOffset >= floor[floor[k].index].offsetTop) {
sidbar.style.display = "block";
siblings(items, 'item');
items[floor[k].index].className = "item active";
} else if (window.pageYOffset < floor[0].offsetTop) {
sidbar.style.display = "none";
}
if (window.pageYOffset > floor[floor.length - 1].offsetTop + floor[floor.length - 1].offsetHeight) {
sidbar.style.display = "none";
}
}
}
</script>
</body>
</html>
八.放大镜（案例）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.content {
width: 1200px;
height: 600px;
border: 1px solid red;
margin: 100px auto;
}
.content .left,
.content .right {
width: 50%;
float: left;
position: relative;
}
.content .left .small {
width: 350px;
height: 350px;
border: 1px solid red;
position: relative;
}
.content .left .small .mask {
width: 150px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.content .left .small img {
width: 100%;
height: 100%;
}
.content .left .big {
width: 540px;
height: 540px;
position: absolute;
left: 350px;
top: 0px;
overflow: hidden;
border: 1px solid red;
display: none;
}
.content .left .big img {
position: absolute;
}
.box {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<div class="small">
<div class="mask"></div>
<img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/7730/29/22297/103692/64c76216F877246bf/d675e4bc94994b2a.jpg.avif" alt="">
</div>
<div class="big">
<img src="https://img10.360buyimg.com//n0/jfs/t1/7730/29/22297/103692/64c76216F877246bf/d675e4bc94994b2a.jpg.avif" alt="">
</div>
</div>
<div class="right"></div>
</div>
<div class="box"></div>
<!-- https://img12.360buyimg.com/n1/jfs/t1/97065/24/37257/93908/641a6fb8F36f67a6d/d95fe949ddcf41ef.jpg.avif -->
<!-- https://img12.360buyimg.com//n0/jfs/t1/97065/24/37257/93908/641a6fb8F36f67a6d/d95fe949ddcf41ef.jpg.avif -->
<script>
var small = document.getElementsByClassName("small")[0];
var mask = document.getElementsByClassName("mask")[0];
var big = document.getElementsByClassName("big")[0];
var content = document.getElementsByClassName("content")[0];
// 鼠标进入small 让 mask显示
// 鼠标进入small 让 大盒子显示
small.onmouseenter = function() {
mask.style.display = "block";
big.style.display = "block";
small.onmousemove = function(e) {
// 蒙版的移动距离
var _left = e.pageX - content.offsetLeft - (mask.offsetWidth / 2);
var _top = e.pageY - content.offsetTop - (mask.offsetHeight / 2);
// 蒙版的最大移动距离
var maxMaskLeft = small.offsetWidth - mask.offsetWidth;
// console.log(maxMaskLeft);
var maxMaskTop = small.offsetHeight - mask.offsetHeight;
console.log(_left);
// 限制最大移动距离
if (_left >= maxMaskLeft) {
_left = maxMaskLeft;
} else if (_left <= 0) {
_left = 0;
}
if (_top >= maxMaskTop) {
_top = maxMaskTop;
} else if (_top <= 0) {
_top = 0;
}
mask.style.left = _left + "px";
mask.style.top = _top + "px";
// 1/2 = x/4
// 蒙版的移动距离/蒙版的最大移动距离 = 图片的移动距离（未知）/图片的最大移动距离
// 蒙版的移动距离 * 大图片的最大移动距离 / 蒙版的最大移动距离 = 大图片的移动距离
big.children[0].style.left = _left * (big.offsetWidth - big.children[0].offsetWidth) / maxMaskLeft + "px";
big.children[0].style.top = _top * (big.offsetHeight - big.children[0].offsetHeight) / maxMaskTop + "px";
}
}
// 离开时让蒙版与大盒子消失
small.onmouseleave = function() {
mask.style.display = "none";
big.style.display = "none";
}
</script>
</body>
</html>
1109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
