写点什么

原来 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:39620

评论

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

2021年1月初Java开发从小公司跳槽阿里制胜关键:狂刷17套大厂真题

Java架构追梦

Java 阿里巴巴 架构 面试

Task01-产品类JD对比

遠景

产品 字节跳动 产品经理 JD

Android入门你值得拥有!史上最通俗计算机网络分层详解,含BATJM大厂

欢喜学安卓

android 程序员 面试 移动开发

Docker发布开发团队2021年三个首选方向;工信部印发《工业互联网创新发展行动计划(2021-2023 年)》

京东科技开发者

云计算

40000美元之后,比特币高位震荡加剧,是买?是卖?还是持有?

CECBC

比特币

ssh连接不上Linux怎么办

HKBGP

Linux

Soul网关源码阅读(七)限流插件初探

Java 网关 限流

面对疫情,我们正在行动!

anyRTC开发者

uni-app android 音视频 WebRTC 在线教育

产品实战作业(Job Model)

晓豪

迷茫 产品经理训练营 BTA 邱岳

“公测”成绩亮眼 数字人民币有望重构支付体系

CECBC

数字红包

什么是产品经理?——课程总结

Deborah

张红珊——第一节课作业

zzz

“战复不胜”的产品经理

产品经理训练营

UML是表达思想的工具

鲁米

UML

量化交易自动炒币软件开发系统

花了19998买的学习教程!Android跨进程通信导论,技术详细介绍

欢喜学安卓

android 程序员 面试 移动开发

Elasticsearch 横向扩容

escray

elastic 七日更 28天写作 死磕Elasticsearch 60天通过Elastic认证考试

Nginx 最常用的两个功能:负载均衡和缓存

码农架构

Java nginx 架构 并发

合约跟单系统APP开发|合约跟单软件开发

系统开发

架构的直观展示

鲁米

架构视图 4+1

四,编程范式

鲁米

编程范式

产品经理训练营 - 第一章 必做作业

Denny-xi

产品经理 产品经理新人如何落地 产品经理训练营

量化策略交易软件开发系统源码

万字解释!在咸鱼被疯抢的网络协议核心彩板手册已曝光!

996小迁

Java 编程 架构 面试 网络协议

有原则,方得始终!

鲁米

SOLID 设计原则

Redis不仅仅是缓存,还是……

码农译站

数据库 redis 缓存 关系型数据库 非关系型数据库

初探架构,随笔整理

鲁米

软件架构

对比:微服务VS单体架构

xcbeyond

微服务 单体架构 28天写作

微众银行区块链:领跑产业应用落地 推进开源生态繁荣

CECBC

区块链技术

第一章作业

转转

产品经理训练营 0 期作业第一章作业

郭郭

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