摘要：某天機緣巧合之下看到一文章然后被深深的迷上了鏈接在此用又學了一招，活變美女但是已經(jīng)了然后花幾天時間去封裝一下水平有限所以標題注明簡陋版首先我們用的女神圖片一基本框架搭建先來看看基本框架構(gòu)建長這樣子我家女神點擊看美女現(xiàn)在來逐步分析一

某天,機緣巧合之下看到一文章,然后被深深的迷上了,鏈接在此brucelyy:用又學了一招，活變美女(但是已經(jīng)404了)
然后花幾天時間去封裝一下,水平有限,所以標題注明簡!陋!!版!!!
首先我們用的女神圖片

先來看看基本框架構(gòu)建長這樣子

    
        
        
    

    
        點擊看美女
        

            

        
    

現(xiàn)在來逐步分析一下主要代碼作用:
html {overflow: hidden;} //隱藏滾動條引起的抖動
其中能實現(xiàn)的關(guān)鍵布局在于下面代碼:

#wrapper div {
    background-image: url("http://b-ssl.duitang.com/uploads/item/201801/14/20180114134621_auNRE.jpeg");
    background-repeat: no-repeat;
    background-size: 40rem auto;
    position: absolute;
    width: 40rem;
    height: 40rem;
}

如果不使用絕對定位接下來的碎片化無法完成的,
由此也可以發(fā)現(xiàn)簡陋版目前問題一:必須使用背景圖實現(xiàn);
背景圖引起的問題二:需要設(shè)置高寬尺寸
其他就沒什么好說了,目前html+部分就出來了

其實原理說起來也不復(fù)雜,就是生成多個小元素分別定位截圖,然后通過伸縮,旋轉(zhuǎn),變形,透明等效果用時間差展現(xiàn).這里直接使用3屬性,控制一個類匹配控制效果
生成時間差的:

// 生成隨機時間差
function Random(start, end) {
  return Math.random() * (end - start) + start;
}

實現(xiàn)效果是通過拆分多個小碎片然后記錄當前位置定位圖片位置,做成類似雪碧圖的效果

// 拆分多個小碎片然后記錄當前位置定位圖片位置,做成類似雪碧圖的效果
for (var i = 0; i < r; i++) {
  for (var j = 0; j < c; j++) {
    var _div = document.createElement("div");
    var _left = j * w, _top = i * h;
    _div.style.Text = "width:" + w + "px;height:" + h + "px;left:" + _left + "px;top:" + _top + "px; opacity:0;background-position:" + (-_left) + "px " + (-_top) + "px";
    _div.style.transition = "all " + Random(1, 1.8) + "s  ease";
    _div.style.transform = "perspective(800px) translate3d(" + Random(-200, 200) + "px, " + Random(-200, 200) + "px,300px) rotate(" + Random(-90, 90) + "deg) scale(" + Random(0, 2) + ")"
    box.appendChild(_div);
  }
}

因為這樣子分別插入太耗性能了,我是通過字符創(chuàng)批量插入
由此也可以發(fā)現(xiàn)簡陋版目前問題三:性能損耗大,暫時思路可以考慮canvas,不過我研究不多,就先用字符串解決先;

觸發(fā)的關(guān)鍵樣式:

#div.set div {
    opacity: 1 !important;
    transform: perspective(800px) translate3d(0px, 0px, 0px) rotate(0deg) scale(1) !important;
    -moz-transform: perspective(800px) translate3d(0px, 0px, 0px) rotate(0deg) scale(1) !important;
    -webkit-transform: perspective(800px) translate3d(0px, 0px, 0px) rotate(0deg) scale(1) !important;
}

這個好在是通過樣式控制而不是js觸發(fā),省事好多

這里我是基于提升個人寫作水平跟對新手友好態(tài)度寫得比較詳細啰嗦,老手直接跳到最下看代碼就行了.
現(xiàn)在大家應(yīng)該都明白原理了,還是為了省事,我就直接用jQuery封裝了,常規(guī)步驟先寫個外層:

$(function($) {
    //默認配置
    var defaults = {
    };
}(jQuery));

然后前面的時間差函數(shù)可以直接在jQuery內(nèi)部作為全局函數(shù)的插件附加到內(nèi)核上去的,而常規(guī)的配置可以有:觸發(fā)元素,分列數(shù)量,動畫時間,延遲時間和控制動畫的類名;即

$(function ($) {

  //默認配置
  var defaults = {
    className: "explode",//控制類名
    button: null, //觸發(fā)按鍵
    lines: 5, //分割行
    rows: 5, //分割列
    delay: 0, //ms,動畫自動執(zhí)行時間,默認300毫秒,0為不觸發(fā)
    time: [1, 1.8], //動畫時間范圍
  };

  $.fn.explode = function (options) {

    //保持this指向，此處沒有必要將this包在$號中如$(this)，因為this已經(jīng)是一個jQuery對象。
    var $self = this,
      _explode = {

        //初始化
        init: function () {

          //執(zhí)行條件
          options = $.extend(defaults, options);

        },

      }

    // 生成隨機時間差
    $.Random = function (start, end) {
      return Math.random() * (end - start) + start;
    }
  }(jQuery))

里面有些值得一說的代碼片段: var $self = this,以前我以為應(yīng)該是var $self = $(this),其實這里的this是指向觸發(fā)對象,例如$("#div").explode(),
所以這里的this === $("#div")?
其實不是,就算內(nèi)容一樣,但其實指向的堆棧不一樣,所以不相等.詳情可參考我之前寫的筆記關(guān)于基本類型和引用類型小知識

這是可配置項,如果不懂用法可以百度一下,總的來說就合并成一個對象,有相同配置后面覆蓋前面的;
options = $.extend(defaults, options);

原文說的批量插入dom元素修改如下:

// 生成DOM
createDom: function() {
  var i = 0,
    j = 0,
    width = $self.width(),
    height = $self.height(),
    w = width / options.lines,
    h = height / options.rows,
    str = "";

  // 切割碎片
  for (; i < options.rows; i++) {
    for (j = 0; j < options.lines; j++) {
      //填充截圖動畫
      var _left = j * w,
        _top = i * h;

      str += "
"
    }
  };

  return str;
}

因為都沒什么難點,就不說了,相信大家都看得明白

考慮到插件最好能解決大多數(shù)問題,用戶只要調(diào)用就完成效果,所以我把控制樣式也動態(tài)加進去

//添加歸為樣式
addStyle: function () {
    var $style = $("style"),
        _w = $self.width(),
        _style = "#wrapper div {background-image:url(" + $self.attr("data-img") + ")}
                #wrapper." + options.className + " div {
                    opacity: 1!important;
                    transform: perspective(" + _w + ") translate3d(0px, 0px, 0px) rotate(0deg) scale(1)!important;
                    -moz-transform: perspective(" + _w + ") translate3d(0px, 0px, 0px) rotate(0deg) scale(1)!important;
                    -webkit-transform: perspective(" + _w + ") translate3d(0px, 0px, 0px) rotate(0deg) scale(1)!important;
                }";

    //已有樣式區(qū)域就追加文本,否則新增
    $style.length
        ? $style.append(_style)
        : $("
    

    
        點擊看美女
        


        
        
        
    

效果是出來的，弊端也很多
問題四:碎片沒有消失，衹是隱藏，很容易會遮擋住其他元素的交互事件，例如案例中的按鈕
問題五:能不能實現(xiàn)出在實際網(wǎng)站里，圖片碎片進入，往下滑才會引發(fā)視圖下面的圖片執(zhí)行，更大可能是要結(jié)合懶加載插件使用

嗯，暫時想到這么多，雖然能力不過硬，有想法還是好的，以后慢慢完善，有人可以交流下會好點