原来 css 也能这么炫酷（二）

<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>

<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>

$(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');     }});

var animateBase = ['bounce', 'flash', 'pulse', 'rubberBand', 'shake',             'swing', 'tada', 'wobble', 'jello', 'bounceIn', 'bounceInLeft',             'bounceInRight', 'lightSpeedIn', 'flip', 'rollIn','bounceInUp'   ];

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-img、background-repeat、background-position、background-size