有没有炫到呢?先贴完整的代码再讲解:
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
更多内容推荐
CorelDRAW Graphics Suite2023 最新中文版下载
从简单的线框到令人称叹的水平,使用CorelDRAW Graphics Suite 2023开始您的设计之旅:一套完整的专业图形设计应用程序,用于矢量插图、布局、照片编辑等。CorelDRAW平面设计软件通常也被叫做CDR,CDR广泛应用于排版印刷、矢量图形编辑及网页设计等领域。通过
2023-04-23
15|定制运营拖拽组件:如何实现运营搭建页面的拖拽功能?
基于原生JavaScript API来实现拖拽布局功能,核心就是要定义“父容器”来承载和限制拖拽的范围,定义“子容器”来控制拖拽操作。
2022-12-28
Android 开发:自定义 TabLayout,神奇效果竟是如此简单,Android 面试题集 2021 版
canvas.drawPath(pathRight, paint);
2021-11-02
10. 区域市场整体策略规划(上)
2023-10-17
android 方式实现 imageview 圆角
public static final int TYPE_ROUND = 1;
2021-11-07
在线图片水印平铺工具
在线图片水印平铺工具
2021-08-16
等保合规是什么意思?怎么做?
最近看到不少人在问,等保合规是什么意思?等保合规是指过等保吗?怎么做?今天我们行云管家小编就跟大家一起来简单了解一下吧!
2022-10-19
做了七年前端开发,我最近才意识到可访问性的必要......
作为一名7年多的前端开发者,我从未想过我的工作需要具有可访问性,直到最近才领悟。
11|布局组件:如何实现自研组件库的布局方案?
一开始“约定好布局规范”,根据规范,用组件方式“搭建好布局骨架”,开发时就在“布局骨架”里填充需要的功能代码。
2022-12-16
基于 electron+vue+element 构建项目模板之【自定义标题栏 & 右键菜单项篇】
lectron Vue1、概述
2022-09-25
举重若轻流水行云,前端纯 CSS3 实现质感非凡的图片 Logo 鼠标悬停 (hover) 光泽一闪而过的光影特效
在前端领域,如果使用纯CSS技术,能不能实现类似的特效呢?答案当然是可以的,这次我们以本站的Logo为例子,以一持万、提纲挈领地讲解一下如何使用纯CSS技术实现图片Logo鼠标悬停光泽一闪而过的光影特效。
2021-12-04
10|动态渲染组件:如何实现 Vue 的动态渲染组件?
设计动态渲染组件的使用函数方法的API,越简洁越好,核心是要控制组件渲染的挂载和卸载的生命周期.
2022-12-14
15|直播中心搭建(一):如何通过 Video.js 配置直播中心?
从这节课起,我们一起来学习实践直播中心的搭建与配置。
2023-05-26
CSS 小技巧之圆形虚线边框
基于伪元素设置锥形渐变 `repeating-conic-gradient`并配合`-webkit-mask-composite`实现自定义圆形虚线边框的效果。
2023-05-15
记一道简单的 Java 面试题,但答错率很高!
相信相当数量的人都已经在准备吐槽了,只要看过《编程珠玑》的人都知道这道题的答案和其中极为简单的道理。不过别着急骂街,不管你信不信,这道笔试题我拿到的答案好多都长这样:
2021-11-12
基于 STM32 设计的指针式电子钟与日历
这是基于STM32设计的一个指针式电子钟+万年历小项目,采用3.5寸的LCD屏显示时钟,日历、温度、天气,支持触摸屏调整设置时间,设置闹钟,查看日历等等。整体项目主要是技术点就是LCD屏的图形绘制。比如: 时钟的时针绘制、分针、秒针、表盘、日历绘制等等。
2022-01-07
5、基于 Sentinel 实现流量控制 03
2023-09-27
flutter 系列之: 使用 SliverList 和 SliverGird
在上一篇文章我们讲解SliverAppBar的时候有提到过,Sliver的组件一般都用在CustomScrollView中。除了SliverAppBar之外,我们还可以为CustomScrollView添加List或者Grid来实现更加复杂的组合效果。
2023-02-13
flutter 系列之: 使用 AnimationController 来控制动画效果
之前我们提到了flutter提供了比较简单好用的AnimatedContainer和SlideTransition来进行一些简单的动画效果,但是要完全实现自定义的复杂的动画效果,还是要使用AnimationController。
2023-05-17
【Flutter 专题】117 图解 Dismissible 滑动清除 Widget
this.background, // 滑动背景展示 Widgetthis.secondaryBackground, // 与background相反滑动背景展示 Widgetthis.confirmDismiss, // 是否确定清除当前 Widgetthis.onResize, // 重新修改尺寸回调this.onDismissed,
2021-11-02
推荐阅读
千万不要忽略 PCB 设计中线宽线距的重要性
2023-09-01
3.3 如何抠掉图片背景色
2023-10-17
44. 制作柱形折线双坐标轴图表
2023-10-17
HarmonyOS 第一课丨中级 _02:ArkUI 进阶#鸿蒙课程##鸿蒙生态#
4.2 形状的渐变填充与渐变线技巧
2023-10-17
Glyphs 2 for Mac(字体设计编辑软件) v2.6.6(1350) 永久激活版
2023-11-09
Nevercenter CameraBag Pro 2023.4.0 破解版 (mac 照片滤镜工具)
2023-11-05
电子书
大厂实战PPT下载
换一换 宋恺涛 | 微软亚洲研究院 高级研究员
张登 | 前圆通 科技架构负责人
黄丛宇(旁通) | 阿里巴巴 技术专家
评论