项目1：精灵图使用-拼接hello
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sprite</title>
<style>
.box {
width: 800px;
height: 400px;
/* background-color: pink; */
margin: 0 auto;
position: relative;
top: 100px;
/* 父元素设置font-size=0；去除行内块元素的默认间距 */
font-size: 0;
}
.box1 {
background-image: url(http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2szyji/TmEUgtj9EK6.7V8ajmQrELKvKUtfMaiP9uoTWoxxB4kMVa*yfZPxKhV5VUaXUVhqt50ABgODKBZHBgTiVWITSh8Mvx.Mu1bAwzJuOb3eT58!/b&bo=6APoA.gD6AMBGT4!&rf=viewer_4);
display: inline-block;
}
.h {
width: 141px;
height: 155px;
background-position: -27px -208px;
}
.e {
width: 127px;
height: 155px;
background-position: -584px -47px;
}
.l {
width: 141px;
height: 155px;
background-position: -548px -210px;
}
.l {
width: 133px;
height: 155px;
background-position: -548px -210px;
}
.o {
width: 153px;
height: 155px;
background-position: -9px -372px;
}
</style>
</head>
<body>
<!--
1.先设置盒子box1的背景图片；
2.用画图工具打开图片用选框量一下盒子的尺寸，最好都设置一样的尺寸；
3.看图模式下，鼠标移动需要选择的字母的左上角，会显示位置，取负值给图片定位即可
4.更具实际情况调整盒子宽高
-->
<div class="box">
<div class="h box1"></div>
<div class="e box1"></div>
<div class="l box1"></div>
<div class="l box1"></div>
<div class="o box1"></div>
</div>
</body>
</html>
项目2:放大镜
这个项目要结合后面的知识，才能看懂。
<!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>
body {
background-color: #d8e7fa;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.item_area {
position: relative;
width: 400px;
height: 480px;
border: 1px solid #888888;
margin: 50px;
}
.item_area .pic {
margin-bottom: 15px;
}
.item_area .pic img {
width: 400px;
height: 400px;
}
.item_area .pic .cover {
position: absolute;
top: 0;
height: 0;
width: 150px;
height: 150px;
background-color: rgba(244, 245, 234, 0.3);
/* background-image: url("http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEF3A.cd5SVBGQ98wblceKrKmGMuFRajAVrG8epoZ3ThAD3WX0R87tWNSsqShuhIkPSQXevJNxYNsOFhbDP0IwDQ!/b&bo=ngGeAQAAAAABFzA!&rf=viewer_4"); */
}
.item_area .list {
display: flex;
}
/* 居中了 */
.item_area .list li {
margin: auto;
}
.item_area .list .current {
border: 2px solid red;
}
.item_area .list img {
width: 50px;
height: 50px;
display: block;
}
.item_area .detail {
width: 400px;
height: 400px;
border: 1px solid #888888;
position: absolute;
top: 0;
left: 420px;
background-image: url("http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEE**OyApeGoKZrvniaEY4v8roNrqMw4s9kl20nHeRQq4tOrb*JryiRYPqWUOwHgtr1.AqYUuNFvC31czu9Xus9c!/b&bo=IAMgAyADIAMBGT4!&rf=viewer_4");
background-size: 266%;
}
</style>
</head>
<body>
<div class="item_area">
<div class="pic">
<img
src="http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEE**OyApeGoKZrvniaEY4v8roNrqMw4s9kl20nHeRQq4tOrb*JryiRYPqWUOwHgtr1.AqYUuNFvC31czu9Xus9c!/b&bo=IAMgAyADIAMBGT4!&rf=viewer_4"
/>
<div class="cover"></div>
</div>
<ul class="list">
<li>
<img
class="current"
src="http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEE**OyApeGoKZrvniaEY4v8roNrqMw4s9kl20nHeRQq4tOrb*JryiRYPqWUOwHgtr1.AqYUuNFvC31czu9Xus9c!/b&bo=IAMgAyADIAMBGT4!&rf=viewer_4"
/>
</li>
<li>
<img
src="http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEFFUJb*SjxiRjUm5CqPgRHQJvLtt6K4qJWr7HWFlxoW8T3tSgtql1w9aUeMSAnMdBb3v1d7UHHwCo2lJenl7EvE!/b&bo=IAMgAyADIAMBGT4!&rf=viewer_4"
/>
</li>
<li>
<img
src="http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEIVorZ64*1gdI.lE1*VJ9XFIFCwwKWIwIeAtPrFjVrgsifWR.StUcRpd7GDUWAH5MKRhdv5VWYchM9WmD8KnSy4!/b&bo=IAMgAyADIAMBGT4!&rf=viewer_4"
/>
</li>
<li>
<img
src="http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEHk79Ewm5AdRJ.UAIqlM3him5yyJJ2KJrIKgTzNPyX9VaNS0vr4*B2jk7NQfldcx2gXxVDDlgbE07Rf4q4cYirg!/b&bo=IAMgAyADIAMBGT4!&rf=viewer_4"
/>
</li>
<li>
<img
src="http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEMivVmlhpCyP3T2uilzKFl4kXOuRpkmfUOp7z1xEeFAG9u7.sTQwGZtj6VZd11b7IUeqEkX8ejHXRo5tsXOrscI!/b&bo=9AH0AfQB9AEBGT4!&rf=viewer_4"
/>
</li>
<li>
<img
src="http://m.qpic.cn/psc?/V53ysRyG2hb34N3Z4SMG2cU0tw2YGwud/TmEUgtj9EK6.7V8ajmQrEIsKTjdjju63APyAqUvb9nxp8CfdVIbJSOURXmeQ3cz107vyVN9t25WjMI9JYZs1f5bc9SkI1agXK29WoT9tlcY!/b&bo=IAMgAyADIAMBGT4!&rf=viewer_4"
/>
</li>
</ul>
<div class="detail"></div>
</div>
<script>
let list = document.querySelector(".list");
let imgs = list.querySelectorAll("img");
let img = document.querySelector(".pic img");
let pic = document.querySelector(".item_area .pic");
let cover = document.querySelector(".cover");
let detail = document.querySelector(".detail");
list.addEventListener("mousemove", function (e) {
if (e.target.tagName == "IMG") {
img.src = e.target.src;
detail.style.backgroundImage = `url("${e.target.src}")`;
imgs.forEach((item) => {
item.className = "";
});
e.target.className = "current";
}
});
pic.addEventListener("mousemove", function (e) {
let ClientX = e.clientX;
let ClientY = e.clientY;
// 元素距离浏览器边界的距离
let picT = pic.getBoundingClientRect().top;
let picL = pic.getBoundingClientRect().left;
//计算75是盒子宽高的一半
let top = ClientY - picT - 75;
let left = ClientX - picL - 75;
top < 0 ? (top = 0) : top > 250 ? (top = 250) : top;
left < 0 ? (left = 0) : left > 250 ? (left = 250) : left;
cover.style.top = top + "px";
cover.style.left = left + "px";
detail.style.backgroundPosition =
(left / 250) * 100 + "%" + (top / 250) * 100 + "%";
});
</script>
</body>
</html>
