拖拽盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.father {
width: 800px;
height: 800px;
border: 1px solid black;
margin: 100px auto;
position: relative;
}
.father .son {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.getElementsByClassName("father")[0];
var son = document.getElementsByClassName("son")[0];
// 获取小盒子的最大移动距离
var max = father.clientWidth - son.clientWidth;
var max2 = father.clientHeight - son.clientHeight;
// console.log(father.offsetWidth - 2)
son.onmousedown = function(e) {
// 获取鼠标点击位置距离盒子内侧坐标
var startX = e.offsetX;
var startY = e.offsetY;
// 给son盒子添加鼠标移动事件
son.onmousemove = function(e) {
// 鼠标距离body的距离-鼠标距离盒子内侧的距离-最大盒子距离父元素的左偏移量=移动距离
var _left = e.clientX - startX - father.offsetLeft;
son.style.left = _left + "px";
// 判断 son盒子的最大偏移量大于或等于最大移动距离的话,小盒子的left就等于最大偏移量
if (son.offsetLeft >= max) {
son.style.left = max + "px";
// 如果son的偏移量等于0的话就等于0
} else if (son.offsetLeft <= 0) {
son.style.left = 0 + "px";
}
var _top = e.clientY - startY - father.offsetTop;
son.style.top = _top + "px";
if (son.offsetTop >= max2) {
son.style.top = max2 + "px";
} else if (son.offsetTop <= 0) {
son.style.top = 0 + "px";
}
};
}
</script>
</body>
</html>
楼层导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 60px;
background-color: #000;
}
.banner {
width: 100%;
height: 600px;
background-color: pink;
}
.content {
width: 1200px;
margin: 0 auto;
}
.content div {
height: 800px;
width: 100%;
font-size: 40px;
font-weight: bold;
color: #fff;
text-align: center;
line-height: 800px;
}
.xsms {
background-color: springgreen;
}
.phb {
background-color: skyblue;
}
.foryou {
background-color: purple;
}
.family {
background-color: orange;
}
.phone {
background-color: greenyellow;
}
.bottom {
width: 100%;
height: 300px;
background-color: #000;
}
.slid-bar {
width: 150px;
position: fixed;
top: 50%;
left: 100px;
margin-top: -75px;
display: none;
}
.slid-bar div {
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid #ccc;
}
.active {
background-color: #f00;
}
</style>
</head>
<body>
<div class="nav"></div>
<div class="banner"></div>
<div class="content">
<div class="xsms box">限时秒杀</div>
<div class="phb box">排行榜</div>
<div class="foryou box">为你推荐</div>
<div class="family box">家用电器</div>
<div class="phone box">手机数码</div>
</div>
<div class="bottom"></div>
<div class="slid-bar">
<div>限时秒杀</div>
<div>排行榜</div>
<div>为你推荐</div>
<div>家用电器</div>
<div>手机数码</div>
</div>
<script>
var slidBar = document.getElementsByClassName("slid-bar")[0];
var box = document.getElementsByClassName("box");
var floor = slidBar.children;
// 排他思想 干掉其他,只留下自己
function sibling(eles, name) {
for (var i = 0; i < eles.length; i++) {
eles[i].style.backgroundColor = "#fff";
}
}
// 监听页面滚动
// document.onscroll = function () {
// console.log("页面滚动");
// // console.log(window.pageYOffset);
// console.log(box[0].offsetTop);
// // 当滚动距离 >= "限时秒杀"距离页面头部距离时,侧边栏展示
// // "限时秒杀"距离页面头部距离 <= 当滚动距离 < "排行榜"距离页面头部距离
// if (window.pageYOffset >= box[0].offsetTop && window.pageYOffset < box[1].offsetTop) {
// slidBar.style.display = "block";
// sibling(floor)
// floor[0].style.backgroundColor = "red";
// // "限时秒杀"距离页面头部距离 <= 当滚动距离 < "排行榜"距离页面头部距离
// } else if (window.pageYOffset >= box[1].offsetTop && window.pageYOffset < box[2].offsetTop) {
// sibling(floor)
// floor[1].style.backgroundColor = "red";
// // "限时秒杀"距离页面头部距离 <= 当滚动距离 < "排行榜"距离页面头部距离
// } else if (window.pageYOffset >= box[2].offsetTop && window.pageYOffset < box[3].offsetTop) {
// sibling(floor)
// floor[2].style.backgroundColor = "red";
// // "限时秒杀"距离页面头部距离 <= 当滚动距离 < "排行榜"距离页面头部距离
// } else if (window.pageYOffset >= box[3].offsetTop && window.pageYOffset < box[4].offsetTop) {
// sibling(floor)
// floor[3].style.backgroundColor = "red";
// // "限时秒杀"距离页面头部距离 <= 当滚动距离 < "排行榜"距离页面头部距离
// } else if (window.pageYOffset >= box[4].offsetTop) {
// sibling(floor)
// floor[4].style.backgroundColor = "red";
// }
// // 当 当滚动距离 < "限时秒杀"距离页面头部距离时,侧边栏隐藏
// else {
// slidBar.style.display = "none";
// }
// }
// 滚动 当前滚动距离 排他思想
// document.onscroll = function () {
// for (var i = 0; i < box.length; i++) {
// if (window.pageYOffset >= box[i].offsetTop) {
// slidBar.style.display = "block";
// sibling(floor);
// floor[i].style.backgroundColor = "red";
// }
// if (window.pageYOffset < box[0].offsetTop) {
// slidBar.style.display = "none";
// }
// }
// }
// for (var j = 0; j < floor.length; j++) {
// // 通过自定义属性
// floor[j].index = j;
// // floor[0].index = 0;
// // floor[1].index = 1;
// // ...
// floor[j].onclick = function () {
// // 事件中的this指向事件源
// // this.index 代表点的时第几个
// // 控制页面卷上去的距离 scrollTop
// // 拿到box[j].offsetTop
// console.dir(this);
// console.log(box[this.index]);
// document.documentElement.scrollTop = box[this.index].offsetTop;
// }
// }
// 楼层导航完整版
// document.onscroll = function () {
// for (var j = 0; j < floor.length; j++) {
// // 通过自定义属性
// floor[j].index = j;
// // 用于判断当前滚动位置属于那一块
// if (window.pageYOffset >= box[j].offsetTop) {
// slidBar.style.display = "block";
// sibling(floor);
// floor[j].style.backgroundColor = "red";
// }
// if (window.pageYOffset < box[0].offsetTop) {
// slidBar.style.display = "none";
// }
// floor[j].onclick = function () {
// // 控制页面卷上去的距离 scrollTop
// // 拿到box[j].offsetTop
// console.dir(this);
// console.log(box[this.index]);
// document.documentElement.scrollTop = box[this.index].offsetTop;
// }
// }
// }
</script>
</body>
</html>
放大镜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.small {
border: 1px solid #ccc;
width: 400px;
height: 400px;
position: relative;
}
.small img {
width: 100%;
}
.big {
width: 600px;
height: 600px;
border: 1px solid #ccc;
position: absolute;
left: 410px;
top: 0;
overflow: hidden;
display: none;
}
.big img {
width: 1600px;
position: absolute;
left: 0;
top: 0;
}
.mask {
width: 150px;
height: 150px;
background-color: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
left: 0;
display: none;
}
</style>
</head>
<body>
<div class="small">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ffe0e69ec-5ccd-4e08-87cc-901f6f0e9e05%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695458921&t=d95b8323fff0c51ae262e37c18df8d3c"
alt="">
<div class="big">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ffe0e69ec-5ccd-4e08-87cc-901f6f0e9e05%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695458921&t=d95b8323fff0c51ae262e37c18df8d3c"
alt="" class="bigimg">
</div>
<div class="mask"></div>
</div>
<script>
var small = document.getElementsByClassName("small")[0];
var big = document.getElementsByClassName("big")[0];
var mask = document.getElementsByClassName("mask")[0];
var bigImg = document.getElementsByClassName("bigimg")[0];
small.onmouseenter = function() {
big.style.display = "block";
mask.style.display = "block";
// var scale = (bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth);
var scale = (big.offsetWidth - 2) / (mask.offsetWidth + 2);
small.onmousemove = function(e) {
// console.log("one" + e.offsetX);
console.log("two" + e.clientX);
mask.style.left = e.clientX - small.offsetLeft - mask.offsetWidth / 2 + "px";
if (mask.offsetLeft > small.offsetWidth - mask.offsetWidth) {
mask.style.left = small.offsetWidth - mask.offsetWidth + "px";
} else if (mask.offsetLeft < 0) {
mask.style.left = 0 + "px";
}
mask.style.top = e.clientY - small.offsetTop - mask.offsetHeight / 2 + "px";
if (mask.offsetTop > small.offsetHeight - mask.offsetHeight) {
mask.style.top = small.offsetHeight - mask.offsetHeight + "px";
} else if (mask.offsetTop < 0) {
mask.style.top = 0 + "px";
}
// 盒子右移,图片左移
// 蒙版最大移动距离 = small.offsetWidth - mask.offsetWidth
// 放大图片的最大移动距离 = bigImg.offsetWidth - big.offsetWidth
// bigImg.style.left = -mask.offsetLeft * scale + "px";
// bigImg.style.top = -mask.offsetTop * scale + "px";
}
}
small.onmouseleave = function() {
big.style.display = "none";
mask.style.display = "none";
}
// 放大镜逻辑
// 1.蒙版跟随鼠标
</script>
</body>
</html>