快捷導(dǎo)航

JavaScript+CSS相冊(cè)特效實(shí)例代碼

更新時(shí)間：2017年09月07日 08:23:22 作者：Lawliet__zmz

下面小編就為大家?guī)?lái)一篇JavaScript+CSS相冊(cè)特效實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

嗯就是這樣一個(gè)例子，視頻學(xué)到的一個(gè)特效，實(shí)際用處并不大，但是可以幫助理解JS語(yǔ)言和熟悉CSS3樣式。

設(shè)計(jì)：

觀察一張圖片的變化，發(fā)現(xiàn)：

1、圖片縮放（隨機(jī)，并且不是同時(shí)運(yùn)動(dòng)）

1、從大到小

2、從小到大，透明度從1到0（在第一步運(yùn)動(dòng)完成后立馬開(kāi)始）

2、圖片旋轉(zhuǎn)（隨機(jī)，并且不是同時(shí)運(yùn)動(dòng)的。需要在全部運(yùn)動(dòng)走完以后開(kāi)始）

3. 因?yàn)槊繌垐D片是隨機(jī)開(kāi)始變換的，所以起始時(shí)間是不同的，這里可設(shè)置一個(gè)延遲器setTimeout，時(shí)間用random隨機(jī)生成即可。

4. 中間需要用到自執(zhí)行函數(shù)，因?yàn)閟etTimeout無(wú)視for循環(huán)的i，所以每次延時(shí)器運(yùn)行的時(shí)候i可能都出錯(cuò)，用自執(zhí)行函數(shù)保存i的每一次值。

5. 轉(zhuǎn)換期間按鈕的div是不能點(diǎn)擊的，需要標(biāo)記和判斷。

6.運(yùn)動(dòng)共有兩個(gè)，縮放和旋轉(zhuǎn)，注意縮放全部結(jié)束才能開(kāi)始旋轉(zhuǎn)，這里也要處理好。

筆記：

scale是縮放

transition 過(guò)渡，延遲

子函數(shù)修改父親的值，就是閉包

自執(zhí)行函數(shù) 這里主要用來(lái)保存i的每一次值

如果直接加定時(shí)器，就不管外面循環(huán)，1s后才執(zhí)行，這時(shí)的i都不知道到哪里了，可能越界

Math.random()產(chǎn)生的值是setTimeout的一個(gè)參數(shù)，延遲的時(shí)間

setTimeout延遲時(shí)間也與電腦卡影響

transitionend只要過(guò)渡了就會(huì)執(zhí)行，它是根據(jù) 樣式來(lái)計(jì)算的

縮放和透明都會(huì)觸發(fā)transitionend

call()改變this指向的對(duì)象

然后就直接實(shí)現(xiàn)了，在加載頁(yè)面的時(shí)候就運(yùn)行這個(gè)特效。

補(bǔ)上中間查到的一些資料：

1.CSS3 opacity 屬性：

值	描述
value	指定不透明度。從0.0（完全透明）到1.0（完全不透明）
inherit	Opacity屬性的值應(yīng)該從父元素繼承

2.HTML DOM scale() 方法：

參數(shù)

參數(shù)	描述
sx, sy	水平和垂直的縮放因子。

描述

scale() 方法為畫布的當(dāng)前變換矩陣添加一個(gè)縮放變換?？s放通過(guò)獨(dú)立的水平和垂直縮放因子來(lái)完成。例如，傳遞一個(gè)值 2.0 和 0.5 將會(huì)導(dǎo)致繪圖路徑寬度變?yōu)樵瓉?lái)的兩倍，而高度變?yōu)樵瓉?lái)的 1/2。指定一個(gè)負(fù)的 sx 值，會(huì)導(dǎo)致 X 坐標(biāo)沿 Y 軸對(duì)折，而指定一個(gè)負(fù)的 sy 會(huì)導(dǎo)致 Y 坐標(biāo)沿著 X 軸對(duì)折。

這里我直接一個(gè)參數(shù)就是同時(shí)縮小高度和寬度

3.

div是塊標(biāo)簽，現(xiàn)在這種情況此div的標(biāo)簽會(huì)被里面圖片高度自己撐起來(lái)，img標(biāo)簽都是默認(rèn)向左漂浮的，剛好每行10個(gè)每個(gè)80px
margin: 0 auto是margin: 0 auto 0 auto的簡(jiǎn)寫，也就是左右自動(dòng)居中，至于為什么沒(méi)有緊挨著上面的div，這個(gè)應(yīng)該是上面那個(gè)margin: 80px auto，已經(jīng)設(shè)置了跟下面的div外邊距80px距離

btn的高度沒(méi)有設(shè)置，靠font撐的

剩下就是代碼了，注釋很詳細(xì)，回調(diào)函數(shù)很多。。：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  /*圖片容器整體樣式，左右居中 視角景深800px */
  #imgWrap{
  width: 800px;
  height: 400px;
  margin: 80px auto;
  perspective: 800px;
  }

  /*左對(duì)齊，高寬*數(shù)量=整體div*/
  #imgWrap img{
  float: left;
  width: 80px;
  height: 80px;
  }

  #btn{
  width: 100px;
  /*height: 40px 這里不定義就是跟font大小一樣*/
  background: rgb(0,100,0);
  padding: 0 20px;
  /*font-size 和 line-height 中可能的值。*/
  font: 16px/40px "微軟雅黑";
  color: #fff;
  margin: 0 auto;
  border-radius: 5px;
  box-shadow: 2px 2px 5px #000;
  cursor: pointer;
  }
 </style>
 <script>
  /*
  * 1、圖片縮放（隨機(jī)，并且不是同時(shí)運(yùn)動(dòng)）
  * 1、從大到小
  * 2、從小到大，透明度從1到0（在第一步運(yùn)動(dòng)完成后立馬開(kāi)始）
  *
  * 2、圖片旋轉(zhuǎn)（隨機(jī)，并且不是同時(shí)運(yùn)動(dòng)的。需要在全部運(yùn)動(dòng)走完以后開(kāi)始）
  */

  window.onload=function(){
  var btn=document.getElementById("btn");
  // 選擇所有元素
  var imgs=document.querySelectorAll("img");
  var endNum=0; //它代表圖片運(yùn)動(dòng)完成的數(shù)量
  var canClick=true; //它代表用戶能否再次點(diǎn)擊

  btn.onclick=function(){
   if(!canClick){
   return; //以下的代碼不要走了
   }
   canClick=false;


   for(var i=0;i<imgs.length;i++){
   (function(i){
    setTimeout(function(){
    /*imgs[i].style.transition='100ms';
    imgs[i].style.transform='scale(0)';
    imgs[i].style.opacity='0';

    imgs[i].addEventListener('transitionend',function(){
     console.log(1);
    });*/

    motion(imgs[i],'50ms',function(){
     this.style.transform='scale(0)';
    },function(){
     motion(this,'1s',function(){
     this.style.transform='scale(1)';
     this.style.opacity='0';
     },function(){
     //在這里表示圖片縮放的運(yùn)動(dòng)已經(jīng)全部完成了，接著走第二個(gè)運(yùn)動(dòng)

     endNum++;
     if(endNum==imgs.length){
      //所有的運(yùn)動(dòng)都完成了
      //console.log('所有的運(yùn)動(dòng)都完成了')
      rotate();
      //endNum=0;
     }
     });
    });
    },Math.random()*1000);
   })(i);
   }
  };


  //旋轉(zhuǎn)功能
  function rotate(){
   for(var i=0;i<imgs.length;i++){
   //給運(yùn)動(dòng)來(lái)一下初始化
   imgs[i].style.transition='';
   /*imgs[i].style.opacity=1;*/
   imgs[i].style.transform='rotateY(0deg) translateZ(-'+Math.random()*500+'px)';

   //運(yùn)動(dòng)來(lái)了，自執(zhí)行函數(shù)
   (function(i){
    setTimeout(function(){
    motion(imgs[i],'2s',function(){
     this.style.opacity=1;
     this.style.transform='rotateY(-360deg) translateZ(0)';
    },function(){
     endNum--; //因?yàn)樵谏洗芜\(yùn)動(dòng)結(jié)束的時(shí)候，endNum的值已經(jīng)加到了50了
     //console.log(endNum);
     if(endNum==0){
     //所有的運(yùn)動(dòng)都完成了
     canClick=true;
     //endNum=0
     }
    });
    },Math.random()*1000);
   })(i);
   }
  }

  //運(yùn)動(dòng)函數(shù)
  function motion(obj,timer,doFn,callBack){
   //motion(運(yùn)動(dòng)對(duì)象,運(yùn)動(dòng)時(shí)間(字符串+單位),運(yùn)動(dòng)屬性(函數(shù)),運(yùn)動(dòng)結(jié)束后的回調(diào)函數(shù))
   obj.style.transition=timer;
   doFn.call(obj);//改變對(duì)象

   var end=true; //用來(lái)知道過(guò)渡有沒(méi)有完成一次

   //結(jié)束事件處理函數(shù)
   function endFn(){
   if(end){
    //callBack&&callBack.call(obj);
    if(callBack){
    callBack.call(obj);
    }

    end=false; //改成false，下次就不會(huì)走這個(gè)if了
   }

   obj.removeEventListener('transitionend',endFn); //結(jié)束后就把這個(gè)事件取消掉，要不它會(huì)一直帶在身上
   }

   obj.addEventListener('transitionend',endFn);
  }
  };
 </script>
 </head>
 <body>
 <div id="imgWrap">
  <img src="images/1.jpg" alt="" />
  <img src="images/2.jpg" alt="" />
  <img src="images/3.jpg" alt="" />
  <img src="images/4.jpg" alt="" />
  <img src="images/5.jpg" alt="" />
  <img src="images/6.jpg" alt="" />
  <img src="images/7.jpg" alt="" />
  <img src="images/8.jpg" alt="" />
  <img src="images/9.jpg" alt="" />
  <img src="images/10.jpg" alt="" />
  <img src="images/11.jpg" alt="" />
  <img src="images/12.jpg" alt="" />
  <img src="images/13.jpg" alt="" />
  <img src="images/14.jpg" alt="" />
  <img src="images/15.jpg" alt="" />
  <img src="images/16.jpg" alt="" />
  <img src="images/17.jpg" alt="" />
  <img src="images/18.jpg" alt="" />
  <img src="images/19.jpg" alt="" />
  <img src="images/20.jpg" alt="" />
  <img src="images/21.jpg" alt="" />
  <img src="images/22.jpg" alt="" />
  <img src="images/23.jpg" alt="" />
  <img src="images/24.jpg" alt="" />
  <img src="images/25.jpg" alt="" />
  <img src="images/26.jpg" alt="" />
  <img src="images/27.jpg" alt="" />
  <img src="images/28.jpg" alt="" />
  <img src="images/29.jpg" alt="" />
  <img src="images/30.jpg" alt="" />
  <img src="images/31.jpg" alt="" />
  <img src="images/32.jpg" alt="" />
  <img src="images/33.jpg" alt="" />
  <img src="images/34.jpg" alt="" />
  <img src="images/35.jpg" alt="" />
  <img src="images/36.jpg" alt="" />
  <img src="images/37.jpg" alt="" />
  <img src="images/38.jpg" alt="" />
  <img src="images/39.jpg" alt="" />
  <img src="images/40.jpg" alt="" />
  <img src="images/41.jpg" alt="" />
  <img src="images/42.jpg" alt="" />
  <img src="images/43.jpg" alt="" />
  <img src="images/44.jpg" alt="" />
  <img src="images/45.jpg" alt="" />
  <img src="images/46.jpg" alt="" />
  <img src="images/47.jpg" alt="" />
  <img src="images/48.jpg" alt="" />
  <img src="images/49.jpg" alt="" />
  <img src="images/50.jpg" alt="" />
 </div>
 <div id="btn">點(diǎn)擊查看效果</div>
 </body>
</html>

以上這篇JavaScript+CSS相冊(cè)特效實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: