0基础学Web—图片懒加载案例、方块跟随鼠标指针拖拽案例、放大镜案例
图片懒加载案例
<style>
.main {
width: 260px;
height: 360px;
border: 3px solid red;
font-size: 0;
overflow: auto;
position: relative;
}
.main>img {
width: 100%;
height: 100%;
}
</style>
<body>
<div class="wrapper">
<div class="main">
<img src="https://m.360buyimg.com/babel/jfs/t20271205/203183/10/52698/49061/6751797bFb24a5f7d/0fb077e7dfbb47ba.png"
alt="">
<img src="./images/movie1.jpg"
data-src="https://m.360buyimg.com/babel/jfs/t20271206/172922/3/44904/105574/6752d5e2F8c6b9487/86a7c355563e4ad4.png"
alt="">
<img src="./images/movie1.jpg"
data-src="https://m.360buyimg.com/babel/jfs/t20271209/248328/36/29226/47783/6756b688Fe8a5e33f/fca8efdb53cf4dc4.jpg"
alt="">
<img src="./images/movie1.jpg"
data-src="https://m.360buyimg.com/babel/jfs/t20271206/194462/10/54326/151160/6752e89bF5f636954/bf476f8932a1c755.png"
alt="">
</div>
</div>
</body>
<script>
let _main = document.querySelector('.main')
let _imgs = document.querySelectorAll('.main>img')
// console.log(_img.offsetTop) //720 360
//1080 720
_main.onscroll = function () {
_imgs.forEach((_img, index) => {
if (index > 0) {
// 距离父元素顶部偏移量-滚动距离=父元素的可视高度
if (_img.offsetTop - _main.scrollTop + 100 <= _main.clientHeight) {
_img.src = _img.dataset.src
}
}
})
}
</script>
方块跟随鼠标指针拖拽案例
<style type="text/css">
#app {
width: 200px;
height: 200px;
background-color: #FF0000;
position: absolute;
left: 1px;
top: 1px;
}
</style>
<body>
<div id="app"></div>
<script type="text/javascript">
let app = document.getElementById("app");
let dx;
let dy;
app.onmousedown = function (e1) {
dx = e1.pageX - app.offsetLeft; //鼠标在浏览器内坐标-方块的坐标=鼠标在方块内的坐标
dy = e1.pageY - app.offsetTop;
app.onmousemove = function (e2) { //鼠标移动事件
app.style.position = "absolute";
app.style.left = (e2.pageX - dx) + "px";
app.style.top = (e2.pageY - dy) + "px";
}
app.onmouseup = function () {
app.onmousemove = "";
}
}
</script>
</body>
放大镜案例
放大镜的原理:
原图宽高比例=缩略图宽高比例=放大镜宽高比例
原图与缩略图倍数比例=大放大镜与小放大镜比例
小放大镜移动方向与原图移动方向相反，
原图移动距离=-小放大镜移动距离倍数
原图:19201200
缩略图:640400
小放大镜:320200
大放大镜:960*600
<style>
.lt {
width: 640px;
height: 400px;
position: relative;
border: 2px solid red;
}
.lt img {
width: 100%;
height: 100%;
}
/* 小放大镜 */
.mark {
width: 320px;
height: 200px;
background-color: #dccf55;
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
/* 默认隐藏 */
display: none;
}
/* 大放大镜 */
.gt {
width: 960px;
height: 600px;
border: 2px solid red;
position: relative;
overflow: hidden;
/* 默认隐藏 */
display: none;
}
.gt img {
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<div class="wrapper">
<!-- 小图 -->
<div class="lt">
<img src="./images/xhr.jpg" alt="">
<!-- 小放大镜 -->
<div class="mark"></div>
</div>
<div class="gt">
<img src="./images/xhr.jpg" alt="">
</div>
</div>
<script>
/*
https://www.16css.com/js/show/1018.html
https://www.jq22.com/yanshi9218
*/
let _lt = document.querySelector(".lt");
//小放大镜
let _mark = document.querySelector(".mark");
//大图
let _gtImg = document.querySelector(".gt img");
let _gt = document.querySelector(".gt");
//鼠标进入显示
_lt.onmouseenter = function () {
_mark.style.display = "block";
_gt.style.display = "block";
}
//鼠标离开隐藏
_lt.onmouseleave = function () {
_mark.style.display = "none";
_gt.style.display = "none";
}
_lt.onmousemove = function (e) {
// 计算移动距离(left)
let dx = e.pageX - _lt.offsetLeft - _mark.offsetWidth / 2;
let dy = e.pageY - _lt.offsetTop - _mark.offsetHeight / 2;
// 到最左边
if (dx <= 0) {
dx = 0
}
// 到最右边
if (dx >= _lt.clientWidth - _mark.offsetWidth) {
dx = _lt.clientWidth - _mark.offsetWidth
}
_mark.style.left = dx + "px";
// 到最上边
if (dy <= 0) {
dy = 0;
}
//到最下边
if (dy >= _lt.clientHeight - _mark.offsetHeight) {
dy = _lt.clientHeight - _mark.offsetHeight
}
_mark.style.top = dy + "px";
//大图反方向移动3倍
_gtImg.style.left = -dx * 3 + "px";
_gtImg.style.top = -dy * 3 + "px";
}
</script>
</body>