原创 百度地圖上自動義座標點及詳細信息效果代碼
我們有時候做開發會用到百度地圖上的一些藉口，來實現對應的功能顯示，鼠標移入移出顯示對應的信息，並可以自己定義顯示的內容，現在我們就來做一個百度地圖上自動義座標點計及詳細信息效果。 參考百度地圖Api地址： http://lbsyun.ba
2019-09-08 16:00:12
2
原创 js實現數字跳動到指定數字代碼
運行結果如下： <!DOCTYPE html> <head> <title>js實現數字跳動到指定數字</title> <style> h1 {font-size: 150px;text-align
2019-08-23 07:33:32
221
原创 js 遞歸思路構造樹型結構數據
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
2019-08-23 07:33:32
原创 原生javascript實現上下左右中間八個點控制元素大小、旋轉角度、拖拽位置功能
最近在接觸一個簡單的圖形編輯器，要求是要實現web頁面加載圖標元素並可以通過上下左右中間八個點鼠標控制元素大小。拖拽功能比較簡單，一般都比較容易實現，主要是旋轉和八個點控制元素的大小，旋轉是相對難理解一點，需要到一些數學問題，關於座標系的
2019-08-15 06:56:49
14
原创 vue封裝slider組件
<template> <div class="slider" @mouseup="mouseup($event)" @mousemove="mousemove($event)" @mousedown="m
2019-07-30 06:58:27
1
原创 用戶登錄拖動驗證碼實現原理詳解。
我們經常看到登錄一些網站或者平臺的時候會出現一些需要拖動驗證碼，實現驗證功能，如鬥魚TV所示，於是就想了下這個要怎麼實現，自己看了下他的html結構，是兩個canvas，然後實現對接，原理應該是一個canvas作爲背景然後，另一個canv
2019-07-30 06:58:27
原创 react + react-router + redux + Ant Design Mobile 移動端H5點餐項目源碼
最近在接觸react，所以花了點時間做了個小的購物demo，以便熟悉對應的api接口。 點擊此處下載源碼 具體頁面如下： 部分代碼： 購物車部分： import React from 'react'; import { withRou
2019-07-08 16:07:18
2
原创 HTML5 Canvas 實現刮獎效果
最近有在看canvas的一些東西，以前在手機端看過有些活動頁面可以實現在手機端刮獎效果，就類似刮彩票顯示中獎的效果，然後自己想了一下要怎麼實現。實現原理是用canvas遮擋住中獎的結果，然後再原來的canvas層繪製透明效果讓底部的中獎結
2019-07-08 08:05:13
原创 window.postMessage()實現往iframe頁面裏面發送消息
window.postMessage()方法可以安全地實現Window對象之間的跨域通信。例如，在一個頁面和它生成的彈出窗口之間，或者是頁面和嵌入其中的iframe之間。 通常情況下，不同頁面上的腳本允許彼此訪問，當且僅當它們源自的頁面共
2019-07-02 16:09:04
原创 vue實現自定義裁剪圖片大小組件
最近在做一個項目，要實現用戶上傳人臉圖片給後端，大小和人臉都有一定的要求，需要使用到在web端實現圖片裁剪功能，也就是將圖片裁剪到對應大小，然後發送給後端。識別這個人的人臉！ 於是想了一下要用canvas的drawImage實現這樣功能。
2019-05-13 01:41:41
6
原创 關於file標籤change選擇同一個文件不會觸發問題
最近在項目開發的過程中遇到一個問題，就是需要file標籤選中後觸發，但是有個問題，就是change選中之後如果選鐘的是同一個文件，那麼change事件就不會觸發，不過最後還是找到了方法去解決這個問題。 上代碼： <!DOCTYPE h
2019-05-07 21:19:51
3
原创 ThreeJs 導入外部三維模型，並實現鼠標滾動放大縮小旋轉效果
let i = 0; function init() { // create a scene, that will hold all our elements such as objects, cameras and ligh
2019-03-29 16:04:30
2
原创 初探threeJs，進入web3D的世界。
最近開始看了webGL的一些知識，瞭解了相關的計算機圖形基礎知識，突然發現這些知識和之前大學學過得3Dmax有很多共性的地方，比如場景，模型、材質、燈光、攝像機等等。突然發現之前自己學的東西並不是全部沒用，理解起來也有一定幫幫助。 運行結
2019-03-29 16:04:30
原创 NuxtJS服務端部署過程。
第一步：安裝node 參考：nodejs安裝過程 第二步：打包項目文件 參考：nuxt服務端渲染 第三步：修改配置文件 第四步：開啓PM2進程守護，如果不開啓那麼關閉連接服務器之後npm start進程就關閉了，就無法訪問 五、運
2019-03-28 08:01:26
原创 HTML5 canvas drawImage方法實現讀取圖片數據截圖拼接圖片。
代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic
2019-03-19 07:41:37
5