JS+CSS精灵实例演示

马黑黑 · 发表于 2022-7-3 09:49

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

一、实现思路
主盒子的背景图片由N多个span标签以碎片化形式均匀排列而成。所有span标签从一张大图的指定区域和尺寸获得背景图像，这需要使用CSS精灵技术。由于碎片化的span标签可能会数量众多，因此使用JS动态创建。JS将依据父盒子的宽度来计算span标签的尺寸和width、height、left、top等值，span标签的背景图像设定也依据父盒子的尺寸进行计算，算法必须精准到位，也要求父盒子和图片的尺寸是一致的。更多实现细节，代码中有相应注释。

二、实例代码

<style>
/* 主盒子 : 父框 */
.pa {
margin: 50px auto 0 auto;
padding: 0; /* 设置为0以确保图片能铺满盒子 */
width: 600px; /* 等于图片实际宽度 */
height: 338px; /* 等于图片实际高度 */
background: #e1e1e1;
position: relative; /* 必须定位 */
}
/* 小块样式 : 预设使用 span 标签 */
.piece {
position: absolute; /* 必须定位 */
display: block; /* 确保 span 标签能正常显示 */
padding: 0; /* 确保内边距影响效果 */
margin: 0;/* 确保外边距影响效果 */
transition: all .5s linear;
}
/* 小块鼠标交互 : 检测小块效果 */
.piece:hover {
transform: translate(10px,10px) skew(20deg);
box-shadow: 2px 2px 10px red;
}
</style>
<div class="pa"></div>
<script>
let pa = document.querySelector('.pa'); //父框操作句柄
let pic = 'https://www.huachaowang.com/data/attachment/forum/202206/24/200554upvwl1h3u3gpjpwv.jpg'; //图片地址
let ww = pa.clientWidth, //父框宽度
hh = pa.clientHeight; //父框高度
let piecesX = 20, //横向小块
piecesY = 10; //纵向小块
let pw = ww / piecesX; //小块宽度
let ph = hh / piecesY; //小块高度
//用for双循环创建纵横小块
for(j=0; j<piecesY; j++) {
for(k=0; k<piecesX; k++) {
let span = document.createElement('span'); //每一次循环创建一个span标签
span.className = 'piece'; //该span的class属性 : class="piece"
span.style.width = pw + 'px'; // 宽度
span.style.height = ph + 'px'; //高度
span.style.left = k * pw + 'px';//左边值
span.style.top = j * ph + 'px';//上边值
//以下定位背景图片到小块上，拼凑的句子样式: url('图片地址') -0px -0px no-repeat
span.style.background = 'url(' + pic + ') -' + k * pw + 'px' + ' -' + j * ph + 'px no-repeat';
pa.appendChild(span);
}
}
</script>