有没有炫到呢？先贴完整的代码再讲解：
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
更多内容推荐
15｜直播中心搭建（一）：如何通过 Video.js 配置直播中心？
从这节课起，我们一起来学习实践直播中心的搭建与配置。
2023-05-26
9. 可观测性：基于可观测性的服务治理
2023-09-27
第 34 集 团队管理的应用技巧之上下对焦、左右对齐
2023-10-17
举重若轻流水行云，前端纯 CSS3 实现质感非凡的图片 Logo 鼠标悬停 (hover) 光泽一闪而过的光影特效
在前端领域，如果使用纯CSS技术，能不能实现类似的特效呢？答案当然是可以的，这次我们以本站的Logo为例子，以一持万、提纲挈领地讲解一下如何使用纯CSS技术实现图片Logo鼠标悬停光泽一闪而过的光影特效。
2021-12-04
CSS 页面设计稿构思与实现（五）之 border-radius
在CSS中border-radius这个属性想必你肯定是不陌生的，通过这个属性你可以设置元素的外边框圆角，从而实现你想要的各种（椭）圆，一个半径确定一个圆形，两个半径时确定一个椭圆，而我们平时所需要达到各种圆角效果，就是通过(椭)圆与边框的交集形成的圆角效果
2021-11-13
4. 架构设计后期应该怎么做？
2023-09-26
做了七年前端开发，我最近才意识到可访问性的必要......
作为一名7年多的前端开发者，我从未想过我的工作需要具有可访问性，直到最近才领悟。
CSS 层叠上下文（Stacking Context）
本文主要介绍了层叠上下文、层叠等级、层叠顺序等概念。目的就是为了理清元素的 Z 轴显示顺序的内部逻辑。
基于 Vue 的商品主图放大镜方案
在做电商类应用时，难免会遇到商品主图实现放大镜效果的场景，现有的基于 Vue 的第三方包不多并且无法直接复用，今天，我来分享一种高稳定性的基于 Vue 的图片放大镜方法。
基于 STM32 设计的指针式电子钟与日历
这是基于STM32设计的一个指针式电子钟+万年历小项目，采用3.5寸的LCD屏显示时钟，日历、温度、天气，支持触摸屏调整设置时间，设置闹钟，查看日历等等。整体项目主要是技术点就是LCD屏的图形绘制。比如: 时钟的时针绘制、分针、秒针、表盘、日历绘制等等。
2022-01-07
Web Components 系列（十）—— 实现 MyCard 的基本布局
理论知识基本上够用了，从现在开始我们需要将理论运用到实践中，让理论为实践服务，使用 Web Components 的相关知识来实现 MyCard 的制作。
2022-02-17
16｜单页面应用：如何理解和实现单页面应用开发？
希望你充分明白单页面路由的技术原理，理解API背后是如何运行的，而不只是停留在vue-router的API使用。
2022-12-30
「趣学前端」开耍 CSS 的 3D 转换，不会玩滑板但能画滑板
用技术实现梦想，用梦想打开创意之门。今天分享前端CSS中的3D转换知识点。
2022-10-16
25｜后台搭建功能：如何设计和实现 Vue.js 运营后台的搭建功能？
页面搭建流程主要分成两个部分，第一是要先做布局设计，第二是填充物料到布局中。所以页面搭建是围绕着“操作布局”和“填充物料”来进行的。
2023-02-06
可视化搭建数据大屏系统的前端实现
DT 时代，数据可视化将会越来越重要。相信有越来越多的同学会遇到大屏的场景。通过可视化搭建大屏系统，可以赋能相关的业务方，让非专业人士做出专业的大屏效果，同时满足公司的一些定制化需求。这里做了一个比较浅的大屏构建方案，本文将带你一探究竟。
CSS 动画篇之炫酷时钟之时钟墙
通过CSS制作的时钟大家肯定看到的多了，但是像下面这样的时钟是不是很少见，整个时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换时间，不得不说这个设计是非常的炫酷且有特色。
2022-07-05
你可能不是那么了解的 CSS Background
Background，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，背景嘛。本文主要为大家介绍 Background 属性的一些基础和进阶用法。
基于 Vue 的两层吸顶踩坑总结
本文简单的介绍了 VueSticky 插件的实现原理并分享了实战过程中出现的问题以及解决方案，希望对大家有所帮助。
迈向 Grid 二维布局时代
CSS Grid 布局是一种强大并且富有创意的的布局方案，这篇文章专门为不了解 Grid 的 web 开发人员来介绍它
关于 vertical-align 你应该知道的一切
vertical-align，写过 CSS 的朋友们肯定都知道这个属性的作用主要是将相邻的文本与元素对齐。本文讲解了 vertical-align 的基本属性及其表现，同时对一些实际应用中该属性无效现象做了简单的分析并提供了相应的解决思路。
推荐阅读
华为云官网 Web3D 和动效技术的应用与探索
Threads 横空出世，通过解析 App，我发现了这些 CSS 小秘密
大前端06. 那只可爱的变色龙
2023-10-17
8.1 模板设计之封面设计方法
2023-10-17
CSS 选择器的一场革命，:has() 高级使用指南
编程语言纯 CSS 实现炫酷背景霓虹灯文字效果
2023-12-04
第 06 讲 销售人员销售风格定位
2023-10-17
电子书
大厂实战PPT下载
换一换 
张昱 | 中国科学技术大学 计算机科学与技术学院副教授
叶波 博士 | 美团 研究员
吴尚儒 | 腾讯云 高级工程师
评论