速来报名!AICon北京站鸿蒙专场~ 了解详情
写点什么

原来 css 也能这么炫酷(二)

  • 2020-01-07
  • 本文字数:4938 字

    阅读完需:约 16 分钟

原来css也能这么炫酷(二)

有没有炫到呢?先贴完整的代码再讲解:

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


2020-01-07 15:39641

评论

发布
暂无评论
发现更多内容

同城双中心自适应同步方案 —— DR Auto-Sync 详解

TiDB 社区干货传送门

【TUG 话题探讨001】TiDB 的应用场景有哪些?看看 TUG 的技术专家怎么说

TiDB 社区干货传送门

如何使用 minio 进行 BR 备份

TiDB 社区干货传送门

使用 TiDB 时的连接池和负载均衡器配置策略

TiDB 社区干货传送门

带着问题读 TiDB 源码:Hive 元数据使用 TiDB 启动报错

TiDB 社区干货传送门

TiCDC 实现 TiDB 备份方案

TiDB 社区干货传送门

【TiDB 社区版主推荐阅读】SQL 窗口函数速查表

TiDB 社区干货传送门

How WebAssembly Powers Database: Build a UDF engine with Wasm

TiDB 社区干货传送门

TiDB 常⻅架构应⽤场景

TiDB 社区干货传送门

【TUG 话题探讨003】TUG 专家们如何做 TiDB 性能调优

TiDB 社区干货传送门

【TUG 话题探讨002】看看 TUG 的技术专家都在用哪些数据库?

TiDB 社区干货传送门

使用MySQL Workbench 迁移SQL Server 2012数据库到TiDB 5.0

TiDB 社区干货传送门

TiFlash 5.x 与 4.x 对比测试

TiDB 社区干货传送门

通过label调度副本测试

TiDB 社区干货传送门

TiDB 4.0 生产环境扩容 TiKV 节点详细步骤

TiDB 社区干货传送门

技术升级&行业升级 TiDB 助力易车打造超级汽车狂欢节

TiDB 社区干货传送门

TiDB 5.0 升级性能初体验

TiDB 社区干货传送门

TiDB GC 之处理案例 & FAQ

TiDB 社区干货传送门

TiDB HTAP 上手指南丨添加 TiFlash 副本的工作原理

TiDB 社区干货传送门

TiDB 性能测试最佳实践

TiDB 社区干货传送门

数据库架构选型

升级5.1.1小问题

TiDB 社区干货传送门

【TUG 话题探讨 005】TiDB 生态工具(DM、TiCDC等)使用场景及常见问题

TiDB 社区干货传送门

数据总量 40 亿+,报表分析数据 10 亿+,TiDB 在中通的落地与进化

TiDB 社区干货传送门

实践案例

【TUG 话题探讨004】对 TiDB 的爱恨之情!

TiDB 社区干货传送门

数据引擎助力车娱融合新业态 让秒杀狂欢更从容

TiDB 社区干货传送门

TiDB 整体架构

TiDB 社区干货传送门

【TiDB 社区版主话题探讨】-深入讨论 BR 备份

TiDB 社区干货传送门

做出让人爱不释手的基础软件:可观测性和可交互性

TiDB 社区干货传送门

内存泄漏的定位与排查:Heap Profiling 原理解析

TiDB 社区干货传送门

故障排查/诊断

TiDB GC 之监控及日志解读

TiDB 社区干货传送门

在Windows下调试TiDB4PG的填坑实记

TiDB 社区干货传送门

原来css也能这么炫酷(二)_语言 & 开发_Think体验设计_InfoQ精选文章