最近做了一個網(wǎng)站界面佳遂，里面用了不少動畫效果营袜，有的直接用CSS3的特性，有的用jQuery實現(xiàn)丑罪，讓我深刻體會到CSS3的博大精深荚板。話說：”有總結(jié)才有進步“，這里規(guī)整一下吩屹，便于未來翻閱跪另。

開發(fā)環(huán)境：
Bootstrap v4.0.0
jQuery v3.2.1
Swiper 4.2.6

動畫效果一：圖片輪播

1.輪播單個圖片

Bootstrap下的carousel，很容易就實現(xiàn)這個功能煤搜。

但是客戶有個小需求免绿，就是圖片上的prev、next的兩個按鈕要在鼠標移動到圖片上才漸顯擦盾，鼠標離開圖片就隱藏這兩個按鈕嘲驾，同時prev、next要用客戶提供的圖片迹卢。通常我們會通過display來控制圖片的顯示與否辽故，使用display的缺點是需要設(shè)置img之外的div的寬高，否則img的display為none的時候腐碱，樣式會亂誊垢。這里我使用CSS3中的“隱身術(shù)”—— opacity，img一直都在症见，只是“隱身”了喂走。

//html、js代碼還是Bootstrap的標準代碼筒饰。
<section id="banner" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#banner" data-slide-to="0" class="active"></li>
      <li data-target="#banner" data-slide-to="1"></li>
      <li data-target="#banner" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="d-block w-100" src="images/banner01.png" >
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="images/banner02.png" >
      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="images/banner03.png" >
      </div>
    </div>
    <a class="carousel-control-prev" href="#banner" role="button" data-slide="prev">
      <img src="images/left.png">
    </a>
    <a class="carousel-control-next" href="#banner" role="button" data-slide="next">
      <img src="images/right.png">
    </a>
</section> 
<script>
    $('#banner').carousel({
      interval: 3000 //banner 停留3秒
    })
</script>

<style>
    /*關(guān)鍵是CSS的代碼*/
    .carousel .carousel-control-prev , .carousel .carousel-control-next { 
      opacity: 0;  /*隱身了*/
    }
    .carousel:hover .carousel-control-prev,.carousel:hover .carousel-control-next {  
      opacity: 1;  /*現(xiàn)身*/
      -moz-transition: opacity 4s; /* 漸顯效果 Firefox 4 */ 
      -webkit-transition: opacity 4s; /* Safari 缴啡、 Chrome  */ 
      -o-transition: opacity 4s; /* Opera  */ 
    }
</style>

2.輪播多個圖片

Bootstrap下的carousel能夠非常方便的實現(xiàn)輪播單圖，但是這個網(wǎng)頁還需要輪播多圖瓷们，就是一屏顯示多圖业栅，單擊next秒咐，向右滾動一張圖片；單擊prev碘裕，向左滾動一張圖携取。carousel就不中了。

在谷歌上找到不少jQuery的插件帮孔，都不滿意雷滋，無意間找到 Swiper這個工具，在基礎(chǔ)演示中發(fā)現(xiàn)210這個示例離我的要求比較貼近文兢，果斷的使用之晤斩。

無奈的是，估計是Swiper要支持移動端姆坚，故為了節(jié)省界面空間澳泵，把prev和next按鈕缺省都放在了圖片上，這對于我那眼里揉不得沙子的客戶可是接受不了的兼呵。又求助谷歌兔辅，發(fā)現(xiàn)還真有不少伙計問Swiper如何把這兩個按鈕放在圖片外面，不過沒有得到明確的解決方案击喂，看來只能依靠自己了维苔。

看了Swiper的代碼，發(fā)現(xiàn)prev懂昂、next按鈕是在js中指定的介时，這就意味著你想用哪個按鈕控制圖片的輪播，prev忍法、next按鈕放哪里潮尝，都隨你。

這里需要注意slidesPerGroup參數(shù)饿序，如果希望圖片分組顯示勉失，就是1、2原探、3乱凿、4顯示，按下next咽弦，顯示5徒蟆、6、7型型、8段审，可以使用slidesPerGroup，注意圖片總數(shù)必須是slidesPerGroup設(shè)置數(shù)字的整數(shù)倍闹蒜，否則最后一頁就讓你崩潰了寺枉；如果不設(shè)置這個參數(shù)抑淫，顯示方式就是 1、2姥闪、3始苇、4；2筐喳、3催式、4、5避归；就是我的這個需求荣月。

<div class="col-md-1" id="myswiper-next">
  <span class="span-vertical"></span>
  <img class="vertical"  src="images/left.png"/>
</div>
<div class="col-md-10">
    <div class="swiper-container" id="myswiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="images/img01.png"/>
            </div>
            <div class="swiper-slide">
              <img src="images/img02.png"/>
            </div>
            <div class="swiper-slide">
              <img src="images/img03.png"/>
            </div>
            <div class="swiper-slide">
              <img src="images/img04.png"/>
            </div>
            <div class="swiper-slide">
              <img src="images/img05.png"/>
            </div>
            <div class="swiper-slide">
              <img src="images/img06.png"/>
            </div>
            <div class="swiper-slide">
              <img src="images/img07.png"/>
            </div>
        </div>
    </div>
</div>
<div class="col-md-1" id="myswiper-prev">
    <span class="span-vertical"></span>
    <img class="vertical"  src="images/right.png"/>
</div>

<script>
  new Swiper('#myswiper', {
    slidesPerView: 5,
    spaceBetween: 3,
    //slidesPerGroup: 4, //如果要分組顯示，圖片的總數(shù)必須是4的倍數(shù)
    loop: true,
    loopFillGroupWithBlank: true,
    navigation: {
      nextEl: '#myswiper-next',  //指定next按鈕
      prevEl: '#myswiper-prev', //指定prev按鈕
    }
  });
</script>

3.走馬燈

這個需求有點類似輪播單圖梳毙，只是圖片要“猶抱琵琶半遮面”的從左邊慢慢的往右移動喉童。這個可以在網(wǎng)上找到很多現(xiàn)成代碼，但都不能滿足要求顿天，為啥呢？“上帝”要求蔑担，圖片顯示完整后牌废，要停留數(shù)秒鐘，再繼續(xù)移動啤握。

在簡書上找到了無縫向上鸟缕、向左滾動--間歇性滾動，文中的向左滾動的代碼跟我的需求契合度高排抬，代碼借過來使使懂从。

對于停留數(shù)秒鐘，有人推薦使用setTimeout蹲蒲，我試了一下番甩，在這個場景中不行，圖片的移動控制有問題届搁。于是采用“耗費CPU”的方法缘薛，用while循環(huán)。

<script>
//js代碼
//停留程序
var sleep = function(n){
  var start=new Date().getTime();
  while(true) if(new Date().getTime()-start>n) break;
}
var scrollleft =  function(){
  var timer = null;
  var speed = 1000/40;
  var html = $("#scrollwrap").html();
  var container = $("#scrollcontent");
  $("#scrollwrap").html(html + html);
  var len = $("#scrollwrap").children('li').length;
  var width = $("#scrollwrap").children('li').eq(0).innerWidth();
  var index = 0;
  $("#scrollwrap").width(len * width);
  timer = setInterval(function(){
    //每幅圖的寬度為700
    //第一幅圖顯示完全后卡睦，停留2秒后宴胧，繼續(xù)走
    if(container.scrollLeft() == 700){   
      sleep(2000)
      container.scrollLeft(index++)
    }else{
      //第二幅圖顯示完全后，停留2秒表锻，回到原地恕齐，重新來過
      if(container.scrollLeft() == 1400){
        sleep(2000)
        index = 0
        container.scrollLeft(index);
      }else{  
        container.scrollLeft(index++)
      }
    }
  },speed);
}
</script>
<div id="scrollcontent">
    <ul id="scrollwrap">
        <li><img src="images/img01.png"></li>
        <li><img src="images/img02.png"></li>
    </ul>
</div>
<script>
  scrollleft();   //調(diào)用
</script>

注意：我的需求中僅顯示兩張圖片，在js代碼中判斷ul的位置判斷了兩次瞬逊，如果是更多的圖显歧，js代碼需要根據(jù)實際需求優(yōu)化仪或。

動畫效果二：給圖片添加說明文字

鼠標移動到圖片上時顯示說明文字，鼠標移走時文字消失追迟∪芷洌“隱身術(shù)”——opacity可以很容易實現(xiàn)，文字的顯示和消失敦间，關(guān)鍵點在于說明文字的position瓶逃。

<div class="img-group" style="background:url(images/img1.png)">
  <div class="img-tip">
    <p>我是圖片的解釋文字</p>
  </div>
</div>

<style>
    .img-group {
      position: relative;
      width:100%;
      height:140px;
    }
    .img-tip {
      position: absolute;
      bottom: 0;
      padding:5px 10px;
      color:white;
      font-size:10px;
      width:100%;
      opacity: 0;
      height :70px
      background: rgba(0,0,0,.3);
    }
    .img-group:hover div{
      opacity: 1;
      -webkit-transition: all 1s;
      -moz-transition: all 1s;
      transition: all 1s;
    }
</style>

鼠標掠過，給圖片加上蒙層

這個需求就是鼠標移動到圖片上時廓块，圖片加上透明的蒙層厢绝。這個有兩種實現(xiàn)方式：

1. 參考上述方法，多添加一個div带猴，div中無內(nèi)容昔汉，需要注意的是這種方式適用于圖片尺寸是固定的。

2. 對于圖片尺寸是自適應(yīng)的拴清，也可以使用 opacity 實現(xiàn)靶病，參見如下代碼：

   img:hover{
     filter:alpha(opacity=10);
     opacity:.1
   }
   

動畫效果三：鼠標移動到圖片，圖片變換

1.變換前后的圖片大小相同

客戶希望ul li的黑點變成自選圖片口予，鼠標移動到圖片上變換圖片娄周。這個可以用background直接實現(xiàn)。

<ul class="changebg">
    <li>hover可以換背景1</li>
    <li>hover可以換背景2</li>
    <li>hover可以換背景3</li>
    <li>hover可以換背景4</li>
</ul>

<style>
    .changebg{
      list-style-type:none;
      padding:0px
    }
    .changebg li{
      background:url(../images/bg1.png) no-repeat 0px 17px;
      padding-left:15px;
    }
    .changebg li:hover{
      background:url(../images/bg2.png) no-repeat 0px 17px;
      padding-left:15px;
    }
</style>

2.變換前后的圖片大小不同

網(wǎng)頁右側(cè)的工具欄中的圖片沪停，鼠標移動到圖片上煤辨，展現(xiàn)出圖片向左推出（即兩個圖片的內(nèi)容是一樣的，只是推出的圖片右邊的邊框長了點）的效果木张。對于這個效果众辨，我本想用background的方法，但是兩個圖片大小不同舷礼，變換的時候樣式亂了鹃彻；也想過用一個圖片，通過改CSS效果妻献，但是也不成功浮声。于是嘗試用jQuery的hover來改變img標簽的內(nèi)容，進行兩個圖片的切換旋奢，搞定泳挥！

<div class="rapid-tools">
  <div>
    <a href="tojianshu" >
        <img src="images/jianshu.png" class="rapid-img" id="img_jianshu" imagename="jianshu">
    </a>
  </div>
  <div>
    <a href="tobaidu" >
        <img  src="images/baidu.png"  class="rapid-img" id="img_baidu" imagename="baidu">
    </a>
  </div>
</div>

<script>
  $("img[id^='img_']").hover(function(){
    $(this).attr('src' , "images/"+$(this).attr('imagename')+"_l.png") ;
  },function(){
    $(this).attr('src' , "images/"+$(this).attr('imagename')+".png") ;
  })
</script>

動畫效果四：鼠標掠過，元素放大

這個CSS3已經(jīng)替我們想到了 —— transform至朗，它可以實現(xiàn)旋轉(zhuǎn)屉符、放大、移動等特效，詳情可以參考 CSS3 transform矗钟。

myimg:hover{
  transform: scale(1.2,1.2); //原圖放大1.2倍
  cursor: pointer;
  transition: 0.5s ease;  //效果柔和點
} 

瀏覽器兼容性

這個問題是讓所有前端工程師頭痛的問題唆香，尤其是面對早期IE的兼容，簡直是欲哭無淚吨艇。好在我的客戶這次沒有這么強硬躬它，要求只要支持IE10就可以，但是如果用戶使用IE10以下的瀏覽器訪問东涡，要給出一個友好的提示冯吓。這就涉及到對瀏覽器的判定問題。谷歌上可以找到很多檢測瀏覽器版本的方法疮跑，如用navigator或者特殊的函數(shù)组贺。對于各瀏覽器對CSS3的支持，可速查CSS3 瀏覽器支持參考手冊

我用的后者祖娘，因為只需要判斷IE10一下的版本失尖，用特殊的函數(shù)簡單些。

<script>
//如果低于IE10渐苏，定向到提示界面
if(!window.FormData){
    window.location.href("alarm.html")
}
</script>

//需要注意掀潮，alarm.html是在IE10以下瀏覽器中顯示，所以只能用低版本的jQuery
<html>
  <head>
    <!--[if lte IE 9]>
        <script src="js/jQuery-1.12.4.min.js"></script>
    <![endif]-->
  </head>
</html>

總結(jié)

雖然被客戶的需求整得幾近崩潰琼富，但是還是在罵完之后耐著性子干完了活兒胧辽，事后總結(jié)還是學(xué)到了不少東西。