最近做了一個(gè)網(wǎng)站界面，里面用了不少動(dòng)畫(huà)效果，有的直接用CSS3的特性，有的用jQuery實(shí)現(xiàn)，讓我深刻體會(huì)到CSS3的博大精深。話說(shuō)：”有總結(jié)才有進(jìn)步“，這里規(guī)整一下，便于未來(lái)翻閱。

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

動(dòng)畫(huà)效果一：圖片輪播

1.輪播單個(gè)圖片

Bootstrap下的carousel，很容易就實(shí)現(xiàn)這個(gè)功能。

但是客戶有個(gè)小需求，就是圖片上的prev、next的兩個(gè)按鈕要在鼠標(biāo)移動(dòng)到圖片上才漸顯，鼠標(biāo)離開(kāi)圖片就隱藏這兩個(gè)按鈕，同時(shí)prev、next要用客戶提供的圖片。通常我們會(huì)通過(guò)display來(lái)控制圖片的顯示與否，使用display的缺點(diǎn)是需要設(shè)置img之外的div的寬高，否則img的display為none的時(shí)候，樣式會(huì)亂。這里我使用CSS3中的“隱身術(shù)”—— opacity，img一直都在，只是“隱身”了。

//html、js代碼還是Bootstrap的標(biāo)準(zhǔn)代碼。
<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.輪播多個(gè)圖片

Bootstrap下的carousel能夠非常方便的實(shí)現(xiàn)輪播單圖，但是這個(gè)網(wǎng)頁(yè)還需要輪播多圖，就是一屏顯示多圖，單擊next，向右滾動(dòng)一張圖片；單擊prev，向左滾動(dòng)一張圖。carousel就不中了。

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

無(wú)奈的是，估計(jì)是Swiper要支持移動(dòng)端，故為了節(jié)省界面空間，把prev和next按鈕缺省都放在了圖片上，這對(duì)于我那眼里揉不得沙子的客戶可是接受不了的。又求助谷歌，發(fā)現(xiàn)還真有不少伙計(jì)問(wèn)Swiper如何把這兩個(gè)按鈕放在圖片外面，不過(guò)沒(méi)有得到明確的解決方案，看來(lái)只能依靠自己了。

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

這里需要注意slidesPerGroup參數(shù)，如果希望圖片分組顯示，就是1、2、3、4顯示，按下next，顯示5、6、7、8，可以使用slidesPerGroup，注意圖片總數(shù)必須是slidesPerGroup設(shè)置數(shù)字的整數(shù)倍，否則最后一頁(yè)就讓你崩潰了；如果不設(shè)置這個(gè)參數(shù)，顯示方式就是 1、2、3、4；2、3、4、5；就是我的這個(gè)需求。

<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.走馬燈

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

在簡(jiǎn)書(shū)上找到了無(wú)縫向上、向左滾動(dòng)--間歇性滾動(dòng)，文中的向左滾動(dòng)的代碼跟我的需求契合度高，代碼借過(guò)來(lái)使使。

對(duì)于停留數(shù)秒鐘，有人推薦使用setTimeout，我試了一下，在這個(gè)場(chǎng)景中不行，圖片的移動(dòng)控制有問(wèn)題。于是采用“耗費(fèi)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秒，回到原地，重新來(lái)過(guò)
      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ù)實(shí)際需求優(yōu)化。

動(dòng)畫(huà)效果二：給圖片添加說(shuō)明文字

鼠標(biāo)移動(dòng)到圖片上時(shí)顯示說(shuō)明文字，鼠標(biāo)移走時(shí)文字消失。“隱身術(shù)”——opacity可以很容易實(shí)現(xiàn)，文字的顯示和消失，關(guān)鍵點(diǎn)在于說(shuō)明文字的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>

鼠標(biāo)掠過(guò)，給圖片加上蒙層

這個(gè)需求就是鼠標(biāo)移動(dòng)到圖片上時(shí)，圖片加上透明的蒙層。這個(gè)有兩種實(shí)現(xiàn)方式：

參考上述方法，多添加一個(gè)div，div中無(wú)內(nèi)容，需要注意的是這種方式適用于圖片尺寸是固定的。
對(duì)于圖片尺寸是自適應(yīng)的，也可以使用 opacity 實(shí)現(xiàn)，參見(jiàn)如下代碼：
```
img:hover{
  filter:alpha(opacity=10);
  opacity:.1
}
```

動(dòng)畫(huà)效果三：鼠標(biāo)移動(dòng)到圖片，圖片變換

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

客戶希望ul li的黑點(diǎn)變成自選圖片，鼠標(biāo)移動(dòng)到圖片上變換圖片。這個(gè)可以用background直接實(shí)現(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)頁(yè)右側(cè)的工具欄中的圖片，鼠標(biāo)移動(dòng)到圖片上，展現(xiàn)出圖片向左推出（即兩個(gè)圖片的內(nèi)容是一樣的，只是推出的圖片右邊的邊框長(zhǎng)了點(diǎn)）的效果。對(duì)于這個(gè)效果，我本想用background的方法，但是兩個(gè)圖片大小不同，變換的時(shí)候樣式亂了；也想過(guò)用一個(gè)圖片，通過(guò)改CSS效果，但是也不成功。于是嘗試用jQuery的hover來(lái)改變img標(biāo)簽的內(nèi)容，進(jìn)行兩個(gè)圖片的切換，搞定！

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

動(dòng)畫(huà)效果四：鼠標(biāo)掠過(guò)，元素放大

這個(gè)CSS3已經(jīng)替我們想到了 —— transform，它可以實(shí)現(xiàn)旋轉(zhuǎn)、放大、移動(dòng)等特效，詳情可以參考 CSS3 transform。

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

瀏覽器兼容性

這個(gè)問(wèn)題是讓所有前端工程師頭痛的問(wèn)題，尤其是面對(duì)早期IE的兼容，簡(jiǎn)直是欲哭無(wú)淚。好在我的客戶這次沒(méi)有這么強(qiáng)硬，要求只要支持IE10就可以，但是如果用戶使用IE10以下的瀏覽器訪問(wèn)，要給出一個(gè)友好的提示。這就涉及到對(duì)瀏覽器的判定問(wèn)題。谷歌上可以找到很多檢測(cè)瀏覽器版本的方法，如用navigator或者特殊的函數(shù)。對(duì)于各瀏覽器對(duì)CSS3的支持，可速查CSS3 瀏覽器支持參考手冊(cè)

我用的后者，因?yàn)橹恍枰袛郔E10一下的版本，用特殊的函數(shù)簡(jiǎn)單些。

<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é)到了不少東西。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

放著我來(lái)——CSS3、jQuery的動(dòng)畫(huà)效果

放著我來(lái)——CSS3、jQuery的動(dòng)畫(huà)效果

動(dòng)畫(huà)效果一：圖片輪播

1.輪播單個(gè)圖片

2.輪播多個(gè)圖片

3.走馬燈

動(dòng)畫(huà)效果二：給圖片添加說(shuō)明文字

鼠標(biāo)掠過(guò)，給圖片加上蒙層

動(dòng)畫(huà)效果三：鼠標(biāo)移動(dòng)到圖片，圖片變換

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

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

動(dòng)畫(huà)效果四：鼠標(biāo)掠過(guò)，元素放大

瀏覽器兼容性

總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

放著我來(lái)——CSS3、jQuery的動(dòng)畫(huà)效果

動(dòng)畫(huà)效果一：圖片輪播

1.輪播單個(gè)圖片

2.輪播多個(gè)圖片

3.走馬燈

動(dòng)畫(huà)效果二：給圖片添加說(shuō)明文字

鼠標(biāo)掠過(guò)，給圖片加上蒙層

動(dòng)畫(huà)效果三：鼠標(biāo)移動(dòng)到圖片，圖片變換

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

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

動(dòng)畫(huà)效果四：鼠標(biāo)掠過(guò)，元素放大

瀏覽器兼容性

總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

放著我來(lái)——CSS3、jQuery的動(dòng)畫(huà)效果

鼠標(biāo)掠過(guò)，給圖片加上蒙層

動(dòng)畫(huà)效果四：鼠標(biāo)掠過(guò)，元素放大