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

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

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

    
        
        
    

    
        點(diǎn)擊看美女
        

            

        
    

現(xiàn)在來逐步分析一下主要代碼作用:
html {overflow: hidden;} //隱藏滾動(dòng)條引起的抖動(dòng)
其中能實(shí)現(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)簡陋版目前問題一:必須使用背景圖實(shí)現(xiàn);
背景圖引起的問題二:需要設(shè)置高寬尺寸
其他就沒什么好說了,目前html+部分就出來了

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

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

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

// 拆分多個(gè)小碎片然后記錄當(dāng)前位置定位圖片位置,做成類似雪碧圖的效果
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);
  }
}

因?yàn)檫@樣子分別插入太耗性能了,我是通過字符創(chuàng)批量插入
由此也可以發(fā)現(xiàn)簡陋版目前問題三:性能損耗大,暫時(shí)思路可以考慮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;
}

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

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

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

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

$(function ($) {

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

  $.fn.explode = function (options) {

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

        //初始化
        init: function () {

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

        },

      }

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

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

這是可配置項(xiàng),如果不懂用法可以百度一下,總的來說就合并成一個(gè)對象,有相同配置后面覆蓋前面的;
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++) {
      //填充截圖動(dòng)畫
      var _left = j * w,
        _top = i * h;

      str += "
"
    }
  };

  return str;
}

因?yàn)槎紱]什么難點(diǎn),就不說了,相信大家都看得明白

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

//添加歸為樣式
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)
        : $("
    

    
        點(diǎn)擊看美女
        


        
        
        
    

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

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