有没有炫到呢？先贴完整的代码再讲解：
Html：
（温馨提示：左右/上下滑动可查看全部代码）
<section class="container-fluid"> <div id="HD-pictures"> <div class="row pic-banner"> <div class="col-md-6 col-md-offset-3 hidden-sm hidden-xs"> <div class="img-box"> <div class="img-mask"></div> </div> </div> </div> <div class="pic-content"> <span class="toLeft glyphicon glyphicon-chevron-left"></span> <span class="toRight glyphicon glyphicon-chevron-right"></span> <ul class="img-list clearfix"> <li> <div class="ac-img"></div> <img width="100%" src="images/section/img-list-1.jpg" alt=""/> </li> <li> <img width="100%" src="images/section/img-list-2.jpg" alt=""/> </li> <li> <img width="100%" src="images/section/img-list-3.jpg" alt=""/> </li> <li> <img width="100%" src="images/section/img-list-4.jpg" alt=""/> </li> <li> <img width="100%" src="images/section/img-list-5.jpg" alt=""/> </li> <li> <img width="100%" src="images/section/img-list-6.jpg" alt=""/> </li> <li> <img width="100%" src="images/section/img-list-7.jpg" alt=""/> </li> <li> <img width="100%" src="images/section/img-list-8.jpg" alt=""/> </li> </ul> </div> </div> </section>
Css：
（温馨提示：左右/上下滑动可查看全部代码）
<style type="text/css"> body { background: #333 } ul { padding:0; } section #HD-pictures .pic-content { margin: 0 50px; overflow: hidden ; position: relative; } section #HD-pictures .pic-content .toLeft, section #HD-pictures .pic-content .toRight { position: absolute; top: 35%; z-index: 300; font-size: 50px; color: rgba(245, 234, 8, 0.2); cursor: pointer; transition: .3s; } section #HD-pictures .pic-content .toLeft { left: 0; } section #HD-pictures .pic-content .toRight { right: 0; } section #HD-pictures .pic-content .toLeft:hover, section #HD-pictures .pic-content .toRight:hover { color: rgba(235, 43, 4, 0.8); } section .img-list { margin: 0; position: relative; left: 0px; transition: .5s; cursor: pointer; } section .img-list > li { position: relative; float: left; } section .pic-banner > .hidden-sm { margin-top: 20px; margin-bottom: 20px; position: relative; } section .img-box { position: relative; } section .img-box > .obj { position: absolute; } section .img-mask { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; } </style>
Js：
（温馨提示：左右/上下滑动可查看全部代码）
$(function () { +function () { var ulList = $(".img-list"); var acImg = $('.img-list .ac-img'); var imgBox = $('.img-box'); var moved = 0;//位移数 var movedAimg = 0;//activeIMG的位移数 var liWidth = parseFloat(layout()[0]); //左右播图 $('.pic-content>span').click(function () { var sizes = layout(); liWidth = parseFloat(sizes); if ($(this).hasClass('toRight')) { if (moved > -4) { moved--; ulList.css('left', moved * liWidth + 'px'); } if (movedAimg < 7) { movedAimg++; acImg.css('left', movedAimg * liWidth + 'px'); splitShowImg(movedAimg); } //right } else { //left if (moved < 0) { moved++; ulList.css('left', moved * liWidth + 'px'); } if (movedAimg > 0) { movedAimg--; acImg.css('left', movedAimg * liWidth + 'px'); splitShowImg(movedAimg); } } });
var k = 0; $('.img-list>li>div.ac-img').click(function (e) { e.stopPropagation(); k = parseFloat($('.img-list>li>.ac-img').css('left')) / liWidth; k = parseInt(k, 10); movedAimg = k; }); $('.img-list>li').click(function () { k = $('.img-list>li').index($(this)); movedAimg = k; acImg.css('left', k * liWidth + 'px'); splitShowImg(k); });
var xCount = 10;//水平分割数 var yCount = 6; var animateBase = ['bounce', 'flash', 'pulse', 'rubberBand', 'shake', 'swing', 'tada', 'wobble', 'jello', 'bounceIn', 'bounceInLeft', 'bounceInRight', 'lightSpeedIn', 'flip', 'rollIn', 'bounceInUp'];
function splitShowImg(movedAimg) { var frag = document.createDocumentFragment(); var parentW = parseFloat(imgBox.parent().css('width')).toFixed(4); imgBox.css({ 'width': parentW + 'px', 'height': (parentW * 9 / 16) + 'px' }); var selfH = parseFloat(imgBox.css('height')); for (var m = 0; m < xCount; m++) { for (var n = 0; n < yCount; n++) { var no = parseInt(Math.random()*(animateBase.length), 10); var div = $(`<div class="obj animated ${animateBase[no]}"></div>`); div.css({ 'width': (parentW / xCount).toFixed(0) + 'px', 'height': (parseFloat(imgBox.css('height')) / yCount).toFixed(0) + 'px' }); var l = m * parseFloat(div.css('width')).toFixed(0); var t = n * parseFloat(div.css('height')).toFixed(0); var bannerImg = $('.img-list img').eq(movedAimg); var url = bannerImg.attr('src'); div.css({ 'top': t + 'px', 'left': l + 'px' }); div.css({ 'background': `url("${url}") no-repeat -${l}px -${t}px / ${parentW}px ${selfH}px` }); $(frag).append(div[0]); } } $('.img-box').append($(frag)); }
splitShowImg(movedAimg); }(); //布局 function layout() { var boxW = parseFloat($(".pic-content").css('width')); var lis = $(".img-list>li"); lis.css('width', boxW * 0.25 + 'px'); var ulW = parseFloat(lis.eq(0).css('width')) * lis.length + 10 + 'px'; $(".img-list").css('width', ulW); return lis.eq(0).css('width'); }});
大家看了代码是否觉得实现起来很简单呢，这个是一个精简版的，最初设计的是一个响应式的轮播，每个小方块都会按不同的屏幕宽度去排列，不过这不是重点，我们只需要关注 splitShowImg 这个函数，他接受一个 img，然后就可以分割这个 img 为我们指定数量的小方块，然后每个小方块以随机漂移的动画从分散状态组装为一个完整的大图。我们这里分为了 60 个小方块。
关键实现点：
（温馨提示：左右/上下滑动可查看全部代码）
var animateBase = ['bounce', 'flash', 'pulse', 'rubberBand', 'shake', 'swing', 'tada', 'wobble', 'jello', 'bounceIn', 'bounceInLeft', 'bounceInRight', 'lightSpeedIn', 'flip', 'rollIn','bounceInUp' ];
这里我们定义一个‘动画库’，里面的每一个元素都是 animate 这个动画库提供的类名，然后我们生成一个 0 到数组长度的随机数
（温馨提示：左右/上下滑动可查看全部代码）
var no = parseInt(Math.random()*(animateBase.length), 10);
接下来要生成一个小方块：
（温馨提示：左右/上下滑动可查看全部代码）
var div = $(`<div class="obj animated ${animateBase[no]}"></div>`); div.css({ 'width': (fatherW / xCount).toFixed(0) + 'px', 'height': (parseFloat(imgBox.css('height')) / yCount).toFixed(0) + 'px' }); var l = m * parseFloat(div.css('width')).toFixed(0); var t = n * parseFloat(div.css('height')).toFixed(0); var bannerImg = $('.img-list img').eq(movedAimg); var url = bannerImg.attr('src'); div.css({ 'top': t + 'px', 'left': l + 'px' }); div.css({ 'background': `url("${url}") no-repeat -${l}px -${t}px / ${fatherW}px ${selfH}px` });
这里就是重点所在了，我们根据展示大图区域的大小计算出每个小方块的尺寸，然后再利用绝对定位的偏移量结合自身尺寸做排列，这样就完成了小方块的布局，最后最关键的就是 background 了，我们这里用简写，规则如下：
background: img_url repeat position / size
也就是background-img、background-repeat、background-position、background-size
看到这里你是不是就很明白了呢？简单来说就是利用 background-position、background-size 和定位来实现，background-size 是关键点，它可以保证整个背景图片的大小和布局区域相同，这样就可以等比的赋予每一个小方块对应位置的背景图片，这是 css3 的新属性，详细请参考（如无法打开，请复制链接到浏览器） http://www.w3school.com.cn/css3/css3_background.asp
写了这么久的 css 是不是现在才发现，原来简单的背景图片和绝对定位也可以这样玩？
最后，虽然这种做法看着很炫，但是实际项目中我们却很少这样做，一方面是因为很多样式都是 css3 的新特性，浏览器兼容问题难以解决，更重要的一方面就是这样大量的操作 dom 带来的性能问题是十分严重的，我们只是切了 60 份已经很明显的感觉到切图时略微卡顿，要是再多，页面直接就崩溃了。
我想要表达的其实是很多特效只要我们有想法，肯大胆去创新，最普通的样式组合起来就有可能成为最炫酷的效果。
本转载自 Think 体验设计公众号。
原文链接：https://mp.weixin.qq.com/s/U9sFGG6ZWzh9E4kKUm41ZA
更多内容推荐
11｜DPlayer 播放器综合应用：怎样实现自己的第一个视频播放器？
这节课，我们一起来学习如何在视频平台中实现自己的第一个视频播放器。
2023-05-17
IP 新地标！三思 1700㎡“裸眼 3D 悬浮橱窗”惊艳深圳湾区之心
适逢炎炎夏日，当你走在街头，看见一瓶悬浮半空的巨型雪碧，是否会想起昔日“望梅止渴”的故事？
2023-08-25
在 Flutter 中如何使用 TabBar 和 TabBarView 创建选项卡布局【Flutter 专题 13】
本教程将向您展示如何使用TabBar和TabBarView在 Flutter 中创建选项卡布局。
2021-12-01
读《Software Systems Architecture》（02）—— Software Architecture Concepts
读《Software Systems Architecture》（02）—— Software Architecture Concepts
2022-06-14
10｜详情页实现：如何实现需求定制化？
这节课，我们就结合在线视频平台里两个重要的定制化模块——个人中心和视频。
2023-05-15
webpack 高级配置
我主要是想说摇树失败的原因（tree shaking 失败的原因），先讲下摇树本身效果
2022-11-15
读《Software Engineering at Google》（06）
读《Software Engineering at Google》（06）
2022-04-15
16｜单页面应用：如何理解和实现单页面应用开发？
希望你充分明白单页面路由的技术原理，理解API背后是如何运行的，而不只是停留在vue-router的API使用。
2022-12-30
15｜直播中心搭建（一）：如何通过 Video.js 配置直播中心？
从这节课起，我们一起来学习实践直播中心的搭建与配置。
2023-05-26
14｜ECharts 实战：可视化如何更好地服务于创作者？
这节课，我们将会学习应用一款轻量级数据可视化组件库——ECharts。
2023-05-24
读《Software Engineering at Google》（02）
读《Software Engineering at Google》（02）
2022-04-11
Flutter _ 你真的会用 Slider 组件吗？，kotlin 中文文档 pdf
thumbColor: Colors.white, // 滑块颜色overlayShape: RoundSliderOverlayShape( // 滑块外圈形状，可以自定义overlayRadius: 50, // 滑块外圈大小),overlayColor: Colors.black54, // 滑块外圈颜色valueIndicatorShape: PaddleSliderValueIndicatorShape()
2021-11-05
leetcode 121 Best Time to Buy and Sell Stock 买卖股票的最佳时机 (简单)
遍历一次数组，在每个位置i时，记录i位置之前所有价格中的最低价格，然后将当前价格作为售出价格，查看当前收益是不是最大收益即可。
2022-07-03
ChatGPT 下程序员应该何去何从？
自从看到ChatGPT会编程后，很多人产生了程序员会被淘汰的错觉。为啥说这是一种错觉？
2023-07-28
读《Software Systems Architecture》（28）—— The Evolution Perspective
读《Software Systems Architecture》（28）—— The Evolution Perspective
2022-06-15
微信朋友圈高性能复杂度设计
朋友圈高性能复杂度设计
2021-12-19
CSS 小技巧之圆形虚线边框
基于伪元素设置锥形渐变 `repeating-conic-gradient`并配合`-webkit-mask-composite`实现自定义圆形虚线边框的效果。
2023-05-15
做了七年前端开发，我最近才意识到可访问性的必要......
作为一名7年多的前端开发者，我从未想过我的工作需要具有可访问性，直到最近才领悟。
3、基于 Sentinel 实现流量控制 01
2023-09-27
读《Software Engineering at Google》（17）
读《Software Engineering at Google》（17）
2022-05-02
推荐阅读
如何为 3D 模型导入材质贴图
2023-12-12
推出 Amazon EC2 C7i 实例
2023-12-11
4.2 形状的渐变填充与渐变线技巧
2023-10-17
从大模型到 MaaS 的新生态
2023-10-30
6.9 版式设计六大原则（六）留白
2023-10-17
10.1 黑屏白屏演示技巧
2023-10-17
HarmonyOS 第一课丨中级 _02：ArkUI 进阶#鸿蒙课程##鸿蒙生态#
电子书
大厂实战PPT下载
换一换 
曾臻（Vickie） | 微软 亚太人工智能黑带团队 技术总经理
王鑫涛 博士 | 腾讯 资深研究员
黄高攀 | 阿里云 高级技术专家
评论