原创 JS函數節流防抖
原文鏈接 在前端開發中有一部分的用戶行爲會頻繁的觸發事件執行，而對於DOM操作、資源加載等耗費性能的處理，很可能導致界面卡頓，甚至瀏覽器的崩潰。函數節流(throttle)和函數防抖(debounce)就是爲了解決類似需求應運而生的。
2018-09-03 11:43:55
原创 canvas煙花錦集
canvas可以實現不同動畫效果，本文主要記錄幾種不同節日煙花效果實現。 原文鏈接 實現一 效果地址 html <canvas id="canvas"></canvas> css body { background:
2018-09-03 11:43:55
原创 鼠標移入移出效果 -- jQuery/Vue版
元素內遮罩層根據鼠標方向顯示的效果比較常見，比如百度圖片裏的圖片信息展示。自己動手實現jQuery插件版和Vue組件版效果。 原文地址 git地址 實現思路 根據鼠標的位置定位在元素內出現的方向 根據方向動態設置遮罩層樣式 設置動畫
2018-09-03 11:43:55
原创 node文件重命名
在一個實際需求中，需要對一批文件(如：文本、圖片)進行重命名，按照數字編號。正好藉此熟悉了一下node的fs文件操作，寫了一個批量修改文件名的腳本。 原文鏈接 需求 現有以下圖片文件 需要批量修改文件名稱，變爲統一前綴名稱並且
2018-09-03 11:43:55
2
原创 CSS3漸變效果工具
推薦一個css3漸變效果工具，覺得有幫助的可以收藏下。 工具鏈接 CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。 CSS3 定義了兩種類型的漸變（gradients）： - 線性漸變（Line
2018-09-03 11:43:55
原创 CSS佈局
合理的佈局是產品的基礎，可以使人感覺整齊大方，提升用戶體驗。掌握幾種常見的佈局形式也是前端開發的基礎，對於快速實現頁面重構有很大幫助。 原文鏈接 單列布局 單列布局通常用於網站的首頁，分爲頭部的導航、網頁內容、頁腳相關信息。
2018-09-03 11:43:55
原创 Google LOGO的CSS Sprite
爲紀念美國現代舞舞蹈家瑪莎·葛蘭姆誕辰，Google Doodle推出了一款極其炫酷的LOGO，整個LOGO使用CSS Sprite技術，利用一個初始圖片和一張畫滿各個動作的拼接圖片，實現了動畫，而非傳統的GIF動畫圖像。 原文查看效果
2018-09-03 11:43:55
原创 SVG入門
SVG意爲可縮放矢量圖形(Scalable Vector Graphics)，是使用XML來描述二維圖形和繪圖程序的語言。 本文主要內容： SVG簡介 SVG在HTML中 SVG路徑 SVG路徑動畫 效果 總結 神奇鏈接
2018-09-03 11:43:55
原创 萬聖節動畫-canvas像素點
萬聖節到了，寫一個小例子瞭解一下canvas畫圖方法。 原文鏈接 canvas可以實現一些有趣的效果，動畫實現。以一個簡單的頁面實現瞭解一下基礎的畫圖方法。 效果 萬聖節快樂 預備知識 let canvas = document.
2018-09-03 11:43:55
原创 Canvas彈幕實現
原文鏈接 canvas原生實現直播視頻彈幕效果。 上一篇中用動態創建DOM元素實現彈幕效果，好處是可以在DOM元素上添加事件，但問題是當大量彈幕出現會造成頁面卡頓，於是嘗試用canvas繪製彈幕效果。 canvas知識 繪製文字
2018-09-03 11:43:54
3
原创 JS繼承這點兒事
ECMAScript 實現繼承的方式不止一種。這是因爲 JavaScript 中的繼承機制並不是明確規定的，而是通過模仿實現的。這意味着所有的繼承細節並非完全由解釋程序處理。可以根據需求決定適合的繼承方式。 原文鏈接 對象冒充
2018-09-03 11:43:53
1
原创 Ionic3項目實戰
原文鏈接 記錄一些使用ionic3開發項目實戰經驗和功能解決方案。 目錄結構 Ionic應用是混合式開發的單頁面應用，在開發之初要考慮到頁面的切換和業務流程，以頁面流定義項目層級關係會導致層級過深、不直觀，所以考慮以業務模塊劃分項
2018-09-03 11:43:53
原创 JS彈幕實現
基於直播平臺的流行，利用原生實現一下彈幕效果。 原文鏈接 實現原理 1、設置展示彈幕元素位置屬性爲relative 2、動態創建彈幕元素，位置屬性設置absolute，left爲展示寬度 3、隨機設置彈幕元素top值 4、隨
2018-09-03 11:43:53