JavaScript庫——skrollr.js中文教程

skrollr.js是一款輕量級且強(qiáng)大的js庫，關(guān)于這款js庫的相關(guān)的詳細(xì)教程卻不多。
所以這里根據(jù)國內(nèi)一些大神們的筆記和skrollr官方文檔進(jìn)行總結(jié)，方便自己以后查閱，也方便大家學(xué)習(xí)。
這里主要參考了 Shimily大神的skrollr中文教程，在這個基礎(chǔ)上進(jìn)行改進(jìn)和完善。有什么不妥之處，還希望大家能夠及時指出，共同修改。

一、skrollr 相關(guān)地址鏈接：

二、認(rèn)識我們下載的代碼包：

  • dist文件夾 下是壓縮版的源碼文件skrollr.min.js
  • src文件夾 下是未壓縮的源碼文件skrollr.js
  • examples文件夾 和 test文件夾 是skrollr的實(shí)例代碼，展示的是skrollr具體效果。大家有時間可以瀏覽，作為一個簡單的參考
  • 其他的文件和文件夾我們大可不必去理會

三、skrollr使用方法：

1. 引入源碼文件 skrollr.min.js 或者是 skrollr.js
<script src="skrollr.js"></script>
2.頁面加載完成后，初始化skrollr
<script>
    // 一定要在頁面文檔全部加載完成之后，再進(jìn)行初始化skrollr
    window.onload=function(){
        var s=skrollr.init();
    }
</script>
3.在HTML代碼中，給標(biāo)簽元素添加類似data-200="height:20px"屬性，來進(jìn)行控制樣式變化。
<!--
    當(dāng)滾動條在頂部的時候，div的背景是藍(lán)色
    當(dāng)滾動500px的時候，div的顏色變?yōu)榧t色
    滾動條滾動的過程中，顏色是逐漸由綠色變?yōu)樗{(lán)色的
-->
<div data-0="background-color:rgb(0,0,255)" data-500="background-color:rgb(255,0,0)"></div>

<!-- 
    當(dāng)滾動條在頂部的時候，div的高度是20px
    當(dāng)滾動300px的時候，div的高度是100px
    滾動條滾動的過程中，高度是逐漸由20px變?yōu)?00px的
-->
<div data-0="height:20px" data-300="height:100px"></div>v

<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div>

  • 注意事項(xiàng)：

    • 我們只需要寫出關(guān)鍵幀的狀態(tài)，skrollr會自己添加過度幀。
    • 至少要添加兩個關(guān)鍵幀，但是如果只添加一個關(guān)鍵幀，是沒有過渡效果的，但是這一幀的樣式會作用于元素。
    • 關(guān)鍵幀的書寫順序沒有要求，即下面兩種寫法，最終的效果是一樣的
    <div data-0="height:20px" data-300="height:100px"></div>

<div data-300="height:100px" data-0="height:20px"></div>
    • 在設(shè)置顏色過度的時候，要使用background-color:rgb(0,255,0),不要使用background-color:blue，否則沒有過度效果。
    • skrollr已經(jīng)為我們處理這些討厭的CSS前綴。
    • skrollr允許非線性動畫，你可以把 easing、quadratic、cubic、begin/end、swing、sqrt、outCubic、bounce 放到屬性后面的方括號里面，來控制不同的效果，還可以的通過easings 參數(shù)自定義運(yùn)動函數(shù)
    <div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>

四、skrollr的兩種模式：absolute mode和relative mode

1.absolute mode

格式 data-[offset]-[anchor]
offset： 可以使任意整數(shù),默認(rèn)值是0
anchor： 可以是start或者end

  • data-0 = data-start = data-0-start：滾動條在位置0
  • data-100 = data-100-start：滾動條滾動100px.
  • data--100 = data--100-start：滾動條滾動-100px. (這個看起來是沒有意義的，但是在relative mode里面會用到).
  • data-end = data-0-end：滾動條距離底部為0的時候.
  • data-100-end：100px 滾動條距離底部為100px的時候.
  • data--100-end：滾動條距離底部為-100px的時候
2.relative mode

格式 data-[offset]-(viewport-anchor)-[element-anchor]
offset：可以使任意整數(shù)，默認(rèn)值是0
viewport-anchor：表示視口的底部或者頂部可以是top、center、bottom
element-anchor：表示相對元素的頂部或者底部 可以是top、center、bottom

  • data-top = data-0-top = data-top-top = data-0-top-top: 當(dāng)參照元素的頂部和視口頂部對齊
  • data-100-top = data-100-top-top：當(dāng)參照元素的頂部距離視口頂部100px
  • data--100-top = data--100-top-top：當(dāng)參照元素的頂部距離視口頂部-100px
  • data-top-bottom =data-0-top-bottom：當(dāng)參照元素的底部在視口底部對齊
  • data-center-center = data-0-center-center：當(dāng)參照元素的中部在視口的中間.
  • data-bottom-center = data-0-bottom-center：當(dāng)參照元素和視口的底部對齊
3.特別提醒
  • 有時候你可能需要參照另一個元素來確定關(guān)鍵幀，你需要用到 data-anchor-target
  • 我們可以利用這一屬性來制作 視察滾動 (后面會有專門的文章分享)，所以這個屬性特別重要
<div data-anchor-target="#foo"></div>
4.備注
  • absolute mode 和 relative mode 的offset也可以是百分比，注意格式為 data-10p 
<!--
    當(dāng)滾動條滾動十樓的10%的時候，div的高度是20px
    當(dāng)滾動條滾動十樓的30%的時候，div的高度是100px
-->
<div data-10p="height:20px" data-30p="height:100px"></div>
  • absolute mode 和 relative mode 的offset前面都是可以放一個常量的。但是這個常量需要一個 標(biāo)識符 使用的時候需要在這個標(biāo)識符前面加 下劃線 
<div data-_t="height:50px" data-_t--50="height:10px" data-_t-500="height:100px"></div>
<script>
    var s=skrollr.init({
        constants:{
            t:100            // 在定義常量的時候，不用加下劃線
        }
    });
</script>

<!--上述代碼等價于下面代碼-->
<div data-100="height:50px" data-50="height:10px" data-600="height:100px"></div>

五、 skrollr的一些特性

1.自動給元素添加Class
  • skrollr會自動html標(biāo)簽添加class="skrollr"并且會移除 class="no-skrollr"（如果存在的話）。
  • 還會根據(jù)設(shè)備檢測結(jié)果，給html標(biāo)簽添加class="skrollr-desktop"或者class="skrollr-mobile"以表明運(yùn)行的平臺
  • skrollr會給關(guān)鍵幀添加 class ="skrollable-before" , class ="skrollable-between" 或者class ="skrollable-after" 。skrollr會根據(jù)關(guān)鍵幀所在的位置確定添加哪一個。
2.自動補(bǔ)全css屬性
  • 相鄰的兩個關(guān)鍵幀，如果前一個關(guān)鍵幀設(shè)置了某一個css屬性，例如left:0%，但是后二個關(guān)鍵幀沒有設(shè)置，那么skrollr會在后一個關(guān)鍵幀處，自動將該css屬性設(shè)置為前一個關(guān)鍵幀處的屬性值left:0%。
  • 特別注意的是，這里自動補(bǔ)全是針對相鄰的兩個關(guān)鍵幀。如果一個元素有多個關(guān)鍵幀，則從左到右，依次自動補(bǔ)全相鄰的兩個關(guān)鍵幀的css屬性。
  • 因此，下面兩行代碼是等價的
<div data-100="left:0%;" data-200="top:0%;" data-300="left:50%;" data-400="top:50%;"></div>

<div data-100="left:0%;top:0%;" data-200="left:0%;top:0%;" data-300="left:50%;top:0%;" data-400="left:50%;top:50%;"></div>
3.注意事項(xiàng)
  • 所有的數(shù)字值都需要單位0也不例外。
  • 復(fù)合寫法 margin:0px 0px 0px 0px;對應(yīng) margin:0px 100px 50px 3px; 但是不能對應(yīng) margin:10px;值的數(shù)量必須保持一致，否則會出錯。
  • css3 transform 里面的屬性順序必須一致。例如 transform: scale(10) translate(20px); 可以對應(yīng) transform: scale(25) translate(60px); 但是不可以對應(yīng) transform:translate(60px) scale(25);
  • 動態(tài)改變顏色不支持名稱（例如：red，green）和 16進(jìn)制色值（例如：#ff0）必須使用 rgb() , rgba() , hsl() 或者 hsla()
  • 而且必須對應(yīng)使用，不能第一個關(guān)鍵幀使用rgba()，下一個關(guān)鍵幀就換成hsla()

六、 skrollr.init()中的參數(shù)

我們在初始化skrollr的時候，可以通過設(shè)置一些參數(shù)，來控制滾動條運(yùn)動的時候的一些效果，這里列出一些非常常用的參數(shù)。

1.smoothScrolling
  • 默認(rèn)值：true
  • 作用：在smoothScrolling:true情況下，滾動條停止的時候動畫不會立即停止，而是有一個過渡，過渡時間可以記性設(shè)置。在smoothScrolling:false情況下，沒有過渡，滾動條停止的時候，動畫也立即停止。
  • 示例代碼：
<script>
    var s=skrollr.init({
        smoothScrolling:false
    });
</script>
  • 如果在這里設(shè)置smoothScrolling:false，那么整個頁面上的元素都沒有了過渡效果。在這種情況下，如果想給指定的元素設(shè)置過渡效果，可以采用添加屬性data-smooth-scrolling="on" 
<div data-100="height:50px" data-50="height:10px" data-600="height:100px" data-smooth-scrolling="on"></div>
2.smoothScrollingDuration
  • 默認(rèn)值：200
  • 單位：ms
  • 作用：設(shè)置滾動條停止后，動畫的過渡時間
  • 示例代碼：
<script>
    var s=skrollr.init({
        smoothScrollingDuration:500
    });
</script>
3.constants
  • 作用：定義常量，并且在HTML代碼中引用這些常量
  • 示例代碼：
<div data-_t="height:50px" data-_t--50="height:10px" data-_t-500="height:100px"></div>
<script>
    var s=skrollr.init({
        constants:{
            t:100,            // 在定義常量的時候，不用加下劃線
            i:10,         
            j:200      
        }
    });
</script>

<!--上述代碼等價于下面代碼-->
<div data-100="height:50px" data-50="height:10px" data-600="height:100px"></div>
4.forceHeight
  • 默認(rèn)值：true
  • 作用：假如你整個HTML頁面的高度為1000px，但是給一個元素標(biāo)簽設(shè)置了data-1500="background-color:rgb(255,0,0)"。在forceHeight:true的情況下，頁面會一直往下滾到1500px的位置；在forceHeight:false的情況下，會阻止繼續(xù)滾動，滾動到頁面的底部，也就是1000px處，就停止。
  • 示例代碼：
<script>
    var s=skrollr.init({
        forceHeight:false
    });
</script>
4.mobileCheck=function() {...}
  • 作用：這個參數(shù)允許我們，定義一個檢測移動端的檢測函數(shù)來覆蓋默認(rèn)的檢測函數(shù)。個人覺得用處不是很大。
  • 示例代碼：
<script>
    var s=skrollr.init({
        mobileCheck:function(){
            return (/Android|iPhone|iPad|iPod|BlackBerry/i).test(navigator.userAgent || navigator.vendor || window.opera);
        }
    });
</script>
5.mobileDeceleration
  • 默認(rèn)值：0.004
  • 作用：設(shè)置慣性參數(shù)，在移動設(shè)備上，通過這個參數(shù)，設(shè)置用戶松開手指之后，滑動停止得有多快或者有多慢。設(shè)置為1表示不使用慣性。
  • 示例代碼：
<script>
    var s=skrollr.init({
        mobileDeceleration:0.01
    });
</script>
6.edgeStrategy
  • 默認(rèn)值：set
  • 作用：滾動條超過所定義的關(guān)鍵幀范圍之外的時候，定義元素的狀態(tài)。即滾動條的位置在 第一幀之前 或者在 最后一幀之后 的時候，定義元素的狀態(tài)。
  • 可能取值：set、ease、reset
  • edgeStrategy:'set'：如果滾動條的位置在第一幀之前，那么元素保持第一幀的狀態(tài)；如果滾動條的位置在最后一幀之后，那么元素保持最后一幀的狀態(tài)。
  • edgeStrategy:'ease'：效果同上。只不過ease會根據(jù)easing里面定義的函數(shù)變化。我覺得不用太過理會這一變化。.
  • edgeStrategy:'reset'：滾動條的位置在所定義的關(guān)鍵幀范圍之外的時候，元素的狀態(tài)和關(guān)鍵幀沒有任何關(guān)系了。這個時候，元素會顯示沒有添加關(guān)鍵幀之前的樣式，即按照自己寫的普通的css樣式顯示。
7.skrollrBody
  • 默認(rèn)值：skrollr-body
  • 作用： 設(shè)置新的值來設(shè)置覆蓋默認(rèn)的id選擇符。它功能在移動設(shè)備上非常重要。如果我們沒有去更改skrollrBody的數(shù)值，那么我們需要給 skrollr容器元素 添加id="skrollr-body"。如果我們修改了skrollrBody的數(shù)值，那么相對應(yīng)的 skrollr容器元素 的id值也要修改。否則在移動設(shè)備上無法正常使用skrollr.js
  • 示例代碼：
<script>
    var s=skrollr.init({
        skrollrBody:'my-body'       // 一般不建議修改
    });
</script>
8.beforerender
  • 作用：這是一個事件偵聽函數(shù)，每一次我們滑動鼠標(biāo)或者拖動滾動條的時候，skrollr.js就會渲染頁面。在渲染頁面之前，這個函數(shù)會執(zhí)行。
  • 備注：這個函數(shù)的功能，我到現(xiàn)在都沒搞明白，所以下面先給出原本的英文解釋。等自己搞明白了，再進(jìn)行修改。
  • A listener function that gets called each time right before we render everything. The function will be passed an object with the following properties:
{
    curTop: 10, //the current scroll top offset
    lastTop: 0, //the top value of last time
    maxTop: 100, //the max value you can scroll to. curTop/maxTop will give you the current progress.
    direction: 'down' //either up or down
}
  • Returning false will prevent rendering.
8.render
  • 作用：這是一個事件偵聽函數(shù)，每一次我們滑動鼠標(biāo)或者拖動滾動條的時候，skrollr.js就會渲染頁面。在渲染頁面之后，這個函數(shù)會執(zhí)行。
  • 示例代碼：
<script>
    var s=skrollr.init({
        
      render:function(){
          console.log("完成一次渲染");
      }

    });
</script>
9.easing
  • 作用：用來定義新的運(yùn)動函數(shù)或者是重寫已經(jīng)存在的運(yùn)動函數(shù)，用來控制元素運(yùn)動時候時候的效果。
  • 下面列出skrollr內(nèi)置的一些運(yùn)動函數(shù)：
  • linear：線性運(yùn)動，是默認(rèn)的運(yùn)動函數(shù)。如果不對元素設(shè)置運(yùn)動函數(shù)，元素會線性運(yùn)動。
  • quadratic： 二次方程式運(yùn)動函數(shù)
  • cubic： 三次方程式運(yùn)動函數(shù)
  • cubic： 三次方程式運(yùn)動函數(shù)
  • begin/end：分別返回0和1，沒有動畫。直接從第一幀的狀態(tài)調(diào)到最后一幀的狀態(tài)。
  • swing：開始的時候很慢，但是后面會慢慢加速
  • sqrt：開始的時候很快，但是后面會慢慢減速
  • bounce：像球一樣運(yùn)動，進(jìn)入 網(wǎng)站，查看圖解
  • 如何定義新的運(yùn)動函數(shù)：
<script>
    // 下面這些事官方給出的事例
    // 但是我在實(shí)際測試的時候，發(fā)現(xiàn)這種方式定義的運(yùn)動函數(shù)，不能使用
    // 即使正常使用定義的wtf，但是元素還是使用默認(rèn)的linear方式運(yùn)動
    // 所以大家這里做一個參看即可
    skrollr.init({
        easing: {
            //This easing will sure drive you crazy
            wtf: Math.random,
            inverted: function(p) {
                return 1 - p;
            }
        }
    });
</script>
  • 如何重寫已有的運(yùn)動函數(shù)：
<script>
    var s = skrollr.init({

        // 重寫linear運(yùn)動函數(shù)
        // 注意這里的函數(shù)的返回值的范圍是[0,1]
        // 如果我們對已有的函數(shù)進(jìn)行重寫，那么是有效的，可以改變元素的運(yùn)動狀態(tài)
        easing:{
            linear:function(){
                return 0.5;
            }
        }
        
        })
</script>
  • 如何使用運(yùn)動函數(shù)：
<!--
    直接把easing、quadratic、cubic、begin/end、swing、sqrt、outCubic、bounce
    放到屬性后面的方括號里面，來控制不同的效果
-->
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div>

七、skrollr中的API：

1.skrollr.get()
  • 作用：返回skrollr事例對象
  • 示例代碼：
<script>
    
    var s = skrollr.init();

    console.log(skrollr.get());

</script>
  • 返回結(jié)果：
2.refresh([elements])
  • 作用：刷新傳入的elements對象，這些傳入的elements對象可以是Array, NodeList 或者jquery對象。
  • 備注：如果不傳入對象，則刷新所有
3.getScrollTop()
  • 作用：獲取當(dāng)前的scrollTop
  • 示例代碼：
<script>
    var s = skrollr.init();
    console.log(s.scrollTop());
</script>
4.getMaxScrollTop()
  • 作用：獲取最大scrollTop
  • 示例代碼：
<script>
    var s = skrollr.init();
    console.log(s.getMaxScrollTop());
</script>
5.setScrollTop(top[, force = false])
  • 作用：設(shè)置當(dāng)前scrollTop
  • 備注：如果設(shè)置force=true,那么會直接無動畫的到達(dá)設(shè)置的scrollTop。默認(rèn)情況下是有動畫的
  • 示例代碼：
<script>
    var s = skrollr.init();
    s.setScrollTop(100,force = true);
</script>
6.isMobile()
  • 作用：返回是否運(yùn)行在移動端
  • 示例代碼：
<script>
    var s = skrollr.init();
    alert(s.isMobile());
</script>
  • 效果展示：
7.animateTo(top[, options])
  • 作用：控制滾動條從當(dāng)前位置移動到我們通過top設(shè)置的位置，而且是有過渡動畫的。我認(rèn)為這是一個很好用API。
  • options有三個可選參數(shù)，注意options要以一個對象的形式傳值：
  • duration：過渡時間，單位是ms。默認(rèn)值是1000ms
  • easing：運(yùn)動函數(shù)，默認(rèn)是linear
  • done：回調(diào)函數(shù)，動畫執(zhí)行完成后執(zhí)行
  • 示例代碼：
<script>
    var s = skrollr.init();

    s.animateTo(100, {'duration': 500, "easing": 'linear', "done": fn});

    // 定義回調(diào)函數(shù)，也可在options中使用匿名函數(shù)
    function fn() {
        alert("動畫執(zhí)行完畢");
    }

</script>
8.stopAnimateTo()
  • 作用：停止上面提到的滾動條移動動畫
9.on(name, fn)
  • 作用：給beforerender, render, keyframe添加事件偵聽函數(shù)。
  • 示例代碼：
<script>
    var s = skrollr.init();
    
    // 頁面渲染之前，執(zhí)行函數(shù) 
    s.on('beforerender',function(){
        console.log("渲染頁面之前");
    })

    // 頁面渲染之后，執(zhí)行函數(shù)
    s.on('render',function(){
        console.log("渲染頁面之后");
    })

    // 需要說明的是，如何給keyframe添加事件偵聽函數(shù)，我沒有理解
    // 官方文檔中也沒有給出示例代碼
    // 感覺這一點(diǎn)還是有點(diǎn)坑
</script>
  • 效果展示：
10.off(name)
  • 作用：移除上面添加的事件偵聽函數(shù)
  • 示例代碼：
<script>
    var s = skrollr.init();

    // 頁面渲染之前，執(zhí)行函數(shù)
    s.on('beforerender',function(){
        console.log("渲染頁面之前");
    })

    // 頁面渲染之后，執(zhí)行函數(shù)
    s.on('render',function(){
        console.log("渲染頁面之后");
    })

    // 移除了render的事件偵聽函數(shù)
    s.off('render')
</script>
  • 效果展示：

以上便是我對skrollr.js這個輕量級js庫的總結(jié)。
如果文章中有錯誤的地方，或者遺漏了某些重要的知識點(diǎn)，歡迎大家及時指出，我會及時修正。
最后還是要說一句，如果你的英文不是特別差的話，推薦大家讀讀英文原版文檔。
看到全英文，不用慌，慢慢讀，你肯定看得懂。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 229,001評論 6贊 537
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,786評論 3贊 423
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 176,986評論 0贊 381
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經(jīng)常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,204評論 1贊 315
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 71,964評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 55,354評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音，去河邊找鬼。 笑死，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,410評論 3贊 444
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 42,554評論 0贊 289
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 49,106評論 1贊 335
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,918評論 3贊 356
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,093評論 1贊 371
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,648評論 5贊 362
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,342評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,755評論 0贊 28
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,009評論 1贊 289
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,839評論 3贊 395
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,107評論 2贊 375