原创 純css實現117個Loading效果(上) 更多推薦

本文轉自:純css實現117個Loading效果(上) 前言 這是我這幾十年間從世界各地尋覓到的 Loading特效,合計117個(本文貼出39個,其他例子的放在後面兩篇,可在我主頁尋找),而且是 純CSS 製作的。 因爲特效數量太

原创 Fabric.js 畫布基礎功能

原文出處:Fabric.js 從入門到________ Fabric.js 簡介 Fabric.js 是一個功能強大且操作簡單的 Javascript HTML5 canvas 工具庫。 如果你需要用 canvas 做特效,那我推薦你使

原创 在 Vue3中使用Fabric.js實現漸變(Gradient)效果,包括徑向漸變radial

Fabric.js 簡介 用官方的話來講 Fabric.js 是一個強大而簡單的 Javascript HTML5 canvas 工具庫 簡單來說,如果你需要用 canvas 做特效或者做交互,那不妨試試 Fabric.js 這個

原创 Vite + Vue3 + OpenLayers 同步兩個地圖基礎操作

一、本文簡介 兩個獨立的容器,使用了不同的圖源。但不管操作哪個容器的地圖,另一個也會跟着變化。 二、開發環境 Vite + Vue3 + ol6 # 1、使用 Vite 創建項目;取個好聽的項目名;拉取 vue 的代碼模板 npm

原创 『 JS算法-力扣557題』反轉字符串中的單詞 III

題目 力扣原題鏈接:557. 反轉字符串中的單詞 III 給定一個字符串,你需要反轉字符串中每個單詞的字符順序,同時仍保留空格和單詞的初始順序。 示例: 輸入:"Let's take LeetCode contest" 輸出:"s'te

原创 Vite + Vue3 + OpenLayers 手動激活地圖

一、需求說明 開發中遇到一種需求: 需要展示地圖,但默認不影響頁面滾動。 點擊地圖後,在地圖上方滾動鼠標滾輪可以縮放地圖。 點擊地圖之外的地方,鼠標再回到地圖上滾動滾輪時,頁面可以上下滾動,但地圖不會縮放。 二、開發環境 Vit

原创 Vite + Vue3 + OpenLayers 切換地圖容器

本文簡介 將地圖切換到不同容器裏展示。 不管在地圖上做任何操作,切換容器後,操作過的內容也是會同步過去。 思路 使用 ol 提供的方法可以獲取 當前地圖所在容器 和 設置地圖到新的容器 裏。 Map.getTarget() 獲取當前

原创 純CSS實現『斑馬紋理投影文字』

效果展示 思路分析 層級思路 從展示的效果可以猜到這個效果由3層文字組成。 表面一層黑色文字 中間一層白色文字 最低的一層是斑馬條紋文字 要實現多層文字,我首先想到的是文字投影 text-shadow ,但通常 text-sh

原创 Vite + Vue3 + OpenLayers 彈窗

一、本文簡介 鼠標在地圖上點擊會出現一個彈窗,並且出現在鼠標指針上方。 如果在地圖邊緣點擊,會保證彈窗能完整顯示出來,所以會稍微移動底圖。 二、開發環境 Vite + Vue3 + ol6 # 1、使用 Vite 創建項目;取

原创 Vite + Vue3 + OpenLayers 手動控制縮放級別

一、本文簡介 除了用鼠標滾輪在地圖上縮放外,還可以使用 ol 提供的 api 設置地圖縮放級別。 獲取當前縮放級別:View.getZoom() 設置縮放級別:View.setZoom() 【注意:本文使用的圖源是 OSM ,正

原创 Vite + Vue3 + OpenLayers

一、本文簡介 本文案例使用 Vite 搭建項目,在 Vue 3 的基礎上使用 OpenLayers 。 閱讀本文需要有一定 Vue 3 基礎。 Vite 是構建項目的一個工具,即使沒有 Vite 基礎也沒關係,一步步跟着本文做即可輕鬆把項

原创 原生 node 搭建最基礎的 npm 工具包

本文會簡單介紹一下 npm,如果着急進食,請跳過 「 1 npm 」這節。 1 npm 1.1 npm簡介 相信有興趣點進本文的讀者都大概知道 npm 是什麼。 以下是來自 w3c 對 npm 的介紹。 NPM 是隨同 NodeJS 一起

原创 Vite 搭建 Vue2 項目(Vue2 + vue-router + vuex)

先讓我說幾句廢話。 在寫本文時 Vite 沒有提供 Vue2 的創建方式。 相信有些開發者還沒開始學 Vue3,但又想嚐嚐 Vite。那可以參考本文的進食方式。 如果心急的話,“0、簡介” 可以跳過。 0、簡介 在寫本文時,Vite 默認

原创 【vue2 & G6】快速上手 開發環境 學前準備 快速上手 延伸閱讀

G6 是一個圖可視化引擎。它提供了圖的繪製、佈局、分析、交互、動畫等圖可視化的基礎能力。旨在讓關係變得透明,簡單。讓用戶獲得關係數據的 Insight。 翻譯成白話: G6可以實現 拓撲圖、流程圖、腦圖 等各種奇奇怪怪的圖表的開發,並

原创 【JS】遍歷數組的常用方法(舉例版) for forEach map every some for ... in ... for of filter find reduce

總結了幾種常用的遍歷方法。 只提供基礎例子,高深用法請自己查文檔。 for var arr = [1, 2, 3, 4, 5]; for (var i = 0; i < arr.length; i++) { console.l