国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用原生 js && jquery 實現知乎收起答案功能

Seay / 1625人閱讀

摘要:需求很簡單,而且和知乎的顯示全部收起功能非常相似,但是了一下沒有找到類似的,因此決定自己實現一個看了知乎的網頁代碼。

Update 2016.12.7

已封裝為插件

原生 js 插件$ npm install foldcontent-zhihu@">=3.0.12" --save Usage

jquery 插件 $ npm install foldcontent-zhihu-jquery@">=1.0.1" --save Usage


Update 2016.11.23

此前demo 定義兩個按鈕,一個固定定位,一個絕對定位,因此滾動至底部時會出現兩個按鈕同時出現的問題,用戶體驗不是很好,因此更改為只有一個按鈕,判斷滾動至底部時添加 classname 更改樣式。且精簡了代碼ヾ(≧?≦*)ゝ

scroll 事件性能優化問題。

鼠標滾動時 scroll 事件觸發的間隔大約為 10~20 ms,相對于其他的鼠標、鍵盤事件,它被觸發的頻率很高,間隔很近。因此如果 scroll 事件涉及大量的位置計算、元素重繪等工作,且這些工作無法在下個 scroll 事件觸發前完成,就會導致瀏覽器掉幀

因此需要減少綁定給 scroll 中具體想要執行的業務邏輯的執行次數

并將對象初始化、不變的高度值等緩存在 scroll 事件外部

存在 bug : 當以很快的速度滾動時,有可能執行不到 scroll 綁定的事件(ó﹏ò),有沒得更好的優化方案?

示例代碼及 github 均已更新 ?(ˊ?ˋ*)?


Update 2016.11.22

優化代碼結構,存在命名不規范、jquery 方法和原生 js 方法混用、代碼未封裝、設計冗余等問題。。。review 代碼被批了。。。


沒有需求的話……就自己提一個 ?(???????)?

起初是要做一個公司內部的 mongoDB 日志查詢網站,前端用 bootstrap,后端用 nodejs 做了一個簡單的頁面,不得不說頁面還是很粗陋的,因為一條日志的內容很多,如果直接顯示的話內容太過冗長,往往滾動幾次才能看完一條日志,而且經常查詢的就是固定的幾個 key,直接展示不利于迅速debug。

問題確定了,要實現的就是顯示日志時只顯示經常查詢的幾個鍵值對,點擊展開時顯示全部日志,點擊收起時變回原狀。

需求很簡單,而且和知乎的顯示全部&&收起功能非常相似,但是 Google 了一下沒有找到類似的 demo,因此決定自己實現一個!

Here we go

看了知乎的網頁代碼。原理是點擊顯示全部時,如果這條答案超出瀏覽器視窗,則收起按鈕變成固定定位,js 計算出 right 值,bottom固定為12px;當這條答案底部滾動至瀏覽器視窗內,收起按鈕變回絕對定位。ps 發現知乎是不是改版了,之前答案底部出現在瀏覽器視窗內后這個位置是有收起按鈕的?,按鈕從固定定位變為絕對定位并更改樣式,就像旁邊的作者保留權利這樣的風格~(圖一直傳不上來。。暫時放棄了)

現在的做法是直接隱藏掉固定定位的收起按鈕。

其實我的實現方法和知乎的不甚相同,因為他的 js 代碼我真心……沒看懂!誰能告訴我這種情況應該怎么調試(ノ°ο°)ノ

所以想了另一種思路,在答案右下角定義一個按鈕 A,判斷答案頂部和底部的相對位置 x 和 y ,其中 y = x + 答案的高度(js 獲取)。當答案出現在瀏覽器視窗內,即 x = $(window).height() 時,給 A 添加固定定位,動態定義 right 值;當答案即將滾出瀏覽器視窗,即 y = $(window).height() 時,A 變為相對定位,right 值始終為 20px。當 A 的文本內容為收起時,點擊 A 文本內容變為展開,去掉固定定位。

此處省去連接數據庫等無關工作,僅用兩段有趣的文字作為 demo ~

首先,文字內容分為 all-content 和 part-content 兩部分,分別為折疊前和折疊后要展示的內容,因為還未搞懂知乎折疊答案后顯示哪一部分內容的算法,所以簡單粗暴地分了折疊前和折疊后的內容。。此處有一個 TODO ?

  • In the winter that seat is close enough to the radiator to remain warm and yet not so close as to cause perspiration. In the summer ...
    展開
var doc = $(document);
var win = $(window);
// 多次使用, 緩存起來
doc.on("click", ".unfold", function () {
    var unfold = $(this);
    if (unfold.text() !== "收起") {
        unfold.text("收起").siblings(".part-content").hide().siblings(".all-content").show();
        var panel = unfold.parent();
        var panelScroll = panel.offset().top + panel.height();
        var scrollHeight = doc.scrollTop() + win.height();
        var right = win.width() / 2 - 350 + 20 > 20 ? win.width() / 2 - 350 + 20 : 20;
        // 點擊展開按鈕時即判斷是否出現收起按鈕
        if (scrollHeight - panelScroll < 50) {
            unfold.addClass("fold-fix").css("right", right);
        }
        // 綁定在 scroll 事件上
        var cb = {
            onscroll: function() {
                var panelScroll = panel.offset().top + panel.height();
                var scrollHeight = doc.scrollTop() + win.height();
                var right = win.width() / 2 - 350 + 20 > 0 ? win.width() / 2 - 350 + 20 : 20;
                if (scrollHeight - panelScroll < 50 &&
                    panel.offset().top - scrollHeight < -90 && unfold.text() !== "展開") {
                    unfold.addClass("fold-fix").css("right", right);
                } else {
                    changeStyle(unfold);
                }
                win.off("scroll", cb.onscroll);
                setTimeout(function() {
                    win.on("scroll", cb.onscroll);
                }, 50);
            }
        };
        win.on("scroll", cb.onscroll);
    } else {
        var fold = $(this);
        changeStyle(fold);
        fold.text("展開").siblings(".part-content").show()
            .siblings(".all-content").hide();
    }
});

function changeStyle(i) {
    i.removeClass("fold-fix").css("right", "20px");
}

此處涉及一個知識點:網頁元素的絕對位置 && 相對位置

網頁元素的絕對位置,指該元素的左上角相對于整張網頁左上角的坐標。jquery 中 offset() 方法返回元素相對于文檔的偏移。該方法返回的對象包含兩個整型屬性:top 和 left。x.offset().top 即為 x 元素的絕對高度;

網頁元素的相對位置,指該元素左上角相對于瀏覽器窗口左上角的坐標。絕對位置減去頁面的滾動條滾動的距離就是相對位置。x.offset().top - $(document).scrollTop() 即為 x 元素的相對高度。

本例需要瀏覽器視窗剛剛滾動至答案a的絕對定位按鈕出現的效果,因此此節點為答案底部的相對高度減去瀏覽器視窗高度正好等于負的按鈕 A 的高度。即 a.offset().top + a.height() - $(document).scrollTop() - $(window).height() = - 按鈕高度

阮一峰老師的用Javascript獲取頁面元素的位置這篇文章講解得十分清晰,如果要深入了解這個知識點建議看一下這篇文章,說不定就有茅塞頓開的感覺哦 ?(ˊ?ˋ*)?

如何動態設置固定定位的折疊按鈕 的 right 值呢?

答案的固定寬度是 700px,因此瀏覽器視窗寬度減去 700px 再除以 2 便始終是答案的 right 值,因為按鈕為絕對定位時 right: 20px; 因此 right: $(window).width()/2 - 350 + 20 就保證了固定定位和絕對定位時按鈕都在一條垂直線上,過渡銜接很自然。

當瀏覽器窗口不斷縮小時,上面計算出的固定定位時按鈕的 right 值可能為負,這顯然不符合需求,因此要設置當計算出的 right 值為負時設置 right 值為 20px。

catch the code

源代碼已上傳至 my github (???) ?

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50222.html

相關文章

  • 原生 js &amp;&amp; jquery 實現知乎收起答案功能

    摘要:需求很簡單,而且和知乎的顯示全部收起功能非常相似,但是了一下沒有找到類似的,因此決定自己實現一個看了知乎的網頁代碼。 showImg(https://segmentfault.com/img/remote/1460000008488966);showImg(https://segmentfault.com/img/remote/1460000008488967); Update 20...

    brianway 評論0 收藏0
  • 教你實現React文字展開收起組件

      今天我們講講項目中實戰就是文字展開收起組件的實現過程,講解這個就是為了讓多給大家一個思路,想法。  簡單來說文字展開收起組件產生的需求背景,就是為省略顯示,然后有展開收起的按鈕可以操作。我們看顯示效果上圖:  上圖是文字收起的圖示,超過一定的字數那就收起省略顯示,并出現查看全部按鈕。  上圖顯示的就是操作了查看全部按鈕之后,文字需要全部顯示出來并有收起按鈕。還是來看一張gif圖的顯示最后該組件...

    3403771864 評論0 收藏0
  • 前端資源系列(4)-前端學習資源分享&amp;前端面試資源匯總

    摘要:特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 特意對前端學習資源做一個匯總,方便自己學習查閱參考,和好友們共同進步。 本以為自己收藏的站點多,可以很快搞定,沒想到一入匯總深似海。還有很多不足&遺漏的地方,歡迎補充。有錯誤的地方,還請斧正... 托管: welcome to git,歡迎交流,感謝star 有好友反應和斧正,會及時更新,平時業務工作時也會不定期更...

    princekin 評論0 收藏0
  • 庫&amp;插件&amp;框架&amp;工具

    摘要:一些有用的一些有用的,包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程,大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署,可能大多數前端工程師在工作中都是使用的公司現成的部署系統,與SRE對接、一起完...

    Codeing_ls 評論0 收藏0
  • 庫&amp;插件&amp;框架&amp;工具

    摘要:一些有用的一些有用的,包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程,大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享 淺談前端線上部署與運維 說到前端部署,可能大多數前端工程師在工作中都是使用的公司現成的部署系統,與SRE對接、一起完...

    xiaowugui666 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<