论坛 › 马黑黑教程专版 › JS+CSS精灵实例演示

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

JS+CSS精灵实例演示

一、实现思路
主盒子的背景图片由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>三、所用图片

https://www.huachaowang.com/data/attachment/forum/202206/24/200554upvwl1h3u3gpjpwv.jpg



四、效果演示（移步二楼）

马黑黑 发表于 2022-7-3 09:50

<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>

红影 发表于 2022-7-3 10:01

黑黑辛苦了，这么详细的讲解，终于能明白点JS的赋值和运作原理了{:4_199:}

红影 发表于 2022-7-3 10:02

原来背景就是单一色，但是在交互里加了box-shadow: 2px 2px 10px red; 看起来好像背后有圆一样{:4_173:}

马黑黑 发表于 2022-7-3 10:19

红影 发表于 2022-7-3 10:02
原来背景就是单一色，但是在交互里加了box-shadow: 2px 2px 10px red; 看起来好像背后有圆一样

小块（piece）span的box-shadow效果。这你看出来了，挺好

马黑黑 发表于 2022-7-3 10:22

红影 发表于 2022-7-3 10:01
黑黑辛苦了，这么详细的讲解，终于能明白点JS的赋值和运作原理了

这个，JS是按实际情况计算、执行而已。CSS精灵原理能理解了，就可以给JS准确下达指令，让它去计算并批量完成

红影 发表于 2022-7-3 10:59

马黑黑 发表于 2022-7-3 10:19
小块（piece）span的box-shadow效果。这你看出来了，挺好

黑黑能设计出来，更好呢{:4_187:}

马黑黑 发表于 2022-7-3 11:00

红影 发表于 2022-7-3 10:59
黑黑能设计出来，更好呢

这是貌似是基本功

红影 发表于 2022-7-3 11:01

马黑黑 发表于 2022-7-3 10:22
这个，JS是按实际情况计算、执行而已。CSS精灵原理能理解了，就可以给JS准确下达指令，让它去计算并批量 ...

我认识JS ,JS不认识我，它不肯定听我的指令，再说我也不懂那些指令，下达不出来啊{:4_189:}

马黑黑 发表于 2022-7-3 11:01

红影 发表于 2022-7-3 11:01
我认识JS ,JS不认识我，它不肯定听我的指令，再说我也不懂那些指令，下达不出来啊

基本功要具备才能够驯服JS

红影 发表于 2022-7-3 11:10

马黑黑 发表于 2022-7-3 11:00
这是貌似是基本功

我欠缺太多{:4_173:}

马黑黑 发表于 2022-7-3 11:10

红影 发表于 2022-7-3 11:10
我欠缺太多

因为从来没有学过

红影 发表于 2022-7-3 11:11

马黑黑 发表于 2022-7-3 11:01
基本功要具备才能够驯服JS

JS在我这里还是一匹小野马，我本事不行，驯服不了它{:4_173:}

马黑黑 发表于 2022-7-3 11:11

红影 发表于 2022-7-3 11:11
JS在我这里还是一匹小野马，我本事不行，驯服不了它

能看懂是个开始

红影 发表于 2022-7-3 15:51

马黑黑 发表于 2022-7-3 11:10
因为从来没有学过

在黑黑这里才开始接触它们的。

红影 发表于 2022-7-3 15:52

马黑黑 发表于 2022-7-3 11:11
能看懂是个开始

嗯嗯，我努力{:4_204:}

马黑黑 发表于 2022-7-3 16:27

红影 发表于 2022-7-3 15:52
嗯嗯，我努力

{:4_190:}

马黑黑 发表于 2022-7-3 16:28

红影 发表于 2022-7-3 15:51
在黑黑这里才开始接触它们的。

任何时候开始都不为晚

红影 发表于 2022-7-3 20:22

马黑黑 发表于 2022-7-3 16:28
任何时候开始都不为晚

很开心有这样的机遇来学习这些{:4_187:}

马黑黑 发表于 2022-7-3 20:24

红影 发表于 2022-7-3 20:22
很开心有这样的机遇来学习这些

学习是令人快乐的，尤其是学新的知识

查看完整版本: JS+CSS精灵实例演示