2. 程式人生 > >無線隨機運動-原生JS詳解

無線隨機運動-原生JS詳解

阿新 • • 發佈：2019-02-17
//封裝運動函式； function getStylecss(obj,oStyle){ if(obj.currentStyle){ return obj.currentStyle[oStyle]; }else{ return getComputedStyle(obj,false)[oStyle]; } } function motion(obj,json,options){ options=options || {}; options.time=options.time || 1000
; options.easing=options.easing || 'linear'; clearInterval(obj.timer); var start={}; var distance={}; for(var name in json){ start[name]=parseFloat(getStylecss(obj,name)); if(isNaN(start[name])){ switch
(name){ case 'left': start[name]=obj.offsetLeft; break; case 'top': start[name]=obj.offsetTop; break; case
'right': start[name]=obj.offsetRight; break; case 'bottom': start[name]=obj.offsetBottom; break; } } distance[name]=json[name]-start[name]; } var n=0; var count=Math.floor(options.time/30); obj.timer=setInterval(function(){ n++; for(var name in json){ switch(options.easing) { case 'linear': var a=n/count; var cur=start[name]+distance[name]*a; break; case 'ease-in': var a=n/count; var cur=start[name]+distance[name]*(a*a*a); break; case 'ease-out': var a=1-n/count; var cur=start[name]+distance[name]*(1-a*a*a); break; } if(name == 'opacity'){ obj.style[name]=start[name]+n*distance[name]/count; }else{ obj.style[name]=start[name]+n*distance[name]/count+'px'; } } if(n==count){ clearInterval(obj.timer); options.complete && options.complete(); } },30); } //頁面載入完執行以下程式碼 window.onload=function(ev){ var oDiv=document.getElementByID('target'); //封裝一個求隨機數的函式； function rnd(n,m){ return parseInt(Math.random()*(m-n)+n); } var oEvent=ev||event; var mTop=oEvent.clientHeight-oDiv.offsetHeight;//防止div身體部分跑到可視區外面，所以需要減掉物體本身的寬高； var mLeft=oEvent.clientWidth-oDiv.offsetWidth; function move(){ motion(oDiv,{left:rnd(1,mLeft),toprnd(1,mTop)},{complete:function(){ move();//讓這個函式永遠執行； }}); } move(); }

相關推薦

無線隨機運動-原生JS詳解

//封裝運動函式； function getStylecss(obj,oStyle){ if(obj.currentStyle){ return obj.currentStyle[oStyle]; }else{

原生js詳解ajax請求

前端請求服務端資源利用ajax進行請求，通常可以藉助jquery等第三方庫完成ajax的請求，此處將詳解原生ajax請求：var xhr = new XMLHttpRequest() xhr.open('GET','./api',false) xhr.onreadystate

原生ajax詳解

事情 define 區別 meta one fin uri faild 用戶名 原生Ajax: Ajax基礎:--ajax:無刷新數據讀取,讀取服務器上的信息--HTTP請求方法: --GET:用於獲取數據,如瀏覽帖子 --POST:用於上傳數據,如用戶註冊 -

[js高手之路]深入淺出webpack教程系列2-配置文件webpack.config.js詳解

基本用法 tle webpack 函數 ges 配置 ref 高手之路 pack 接著上文，重新在webpack文件夾下面新建一個項目文件夾demo2，然後用npm init --yes初始化項目的package.json配置文件，然後安裝webpack( npm inst

[js高手之路]深入淺出webpack教程系列3-配置文件webpack.config.js詳解(下)

json 學習 所在 npm chunk target get lan cnblogs 本文繼續接著上文，繼續寫下webpack.config.js的其他配置用法. 一、把兩個文件打包成一個，entry怎麽配置? 在上文中的webpack.dev.config.js中，用數

lazyload.js詳解

django kit 圖片 eight 檢查 web bow failure 加載速度 簡介 lazyload.js用於長頁面圖片的延遲加載，視口外的圖片會在窗口滾動到它的位置時再進行加載，這是與預加載相反的。 優點： 它可以提高頁面加載速度； 在某些情況清晰它

JS-詳解算數運算符"+"

沒有 strong fine span 也會 結果 結合 運算符和 布爾 　　 二元加法運算符“+”可以對兩個數字做加法，也可以做字符串連接操作： 　　當兩個操作數都是數字或都是字符串的時候，計算結果是顯而易見的。然而對於其他情況來說，則要進行一些必要的類型轉換，並且運算符

vue-cli中的ESlint配置文件eslintrc.js詳解

nds str -a vsc == 環境 出錯 allow tom 本文講解vue-cli腳手架根目錄文件.eslintrc.js eslint簡介 eslint是用來管理和檢測js代碼風格的工具，可以和編輯器搭配使用，如vscode的eslint插件 當有不

在vue-cli中使用mock.js詳解

r.js The sage eve conf url RoCE code color 引包1. npm install mockjs --save-dev2. npm install axios --save（axios使用不再講） 修改配置3. 在config文件夾

require.js - 詳解

插件 com 配置 return seconds bsp jquer http 就會 測試結構如下 index.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <he

Aircrack-ng套件——無線破解原理及工具詳解

前言： 現行的無線協議標準在安全方面是完全達標的，是非常安全的。如果現行的無線標準在很被攻破了，業界為什麼還一直在使用這一標準。 因此，破解之所以能成功，完全是因為USR配置路由器不當和密碼強度低的漏洞罷了。 普通無線加密及破解的分類： 1，wep加密：此類加密比較老舊，

JS 詳解 Cookie, LocalStorage 與 SessionStorage

基本概念 Cookie Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4KB左右。它的主要用途有儲存登入資訊，比如你登入某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別使用者身份的資料來實現的。 localStorage

梯度下降與隨機梯度下降概念詳解及推導過程

        同這一張的梯度下降部分加起來,才是我們要講的如何求解多元線性迴歸.如果寫在一章中,內容過長,擔心有的同學會看不完,所以拆分成兩章.[壞笑]         上一章中有提到利用解析解求解多元線性迴歸,雖然看起來很方便,但是在解析解求解的過程中會涉及到矩陣求

Javascript模板引擎mustache.js詳解

mustache.js是一個簡單強大的Javascript模板引擎，使用它可以簡化在js程式碼中的html編寫，壓縮後只有9KB，非常值得在專案中使用。本文總結它的使用方法和一些使用心得，內容不算很高深，純粹是入門內容，看看即可。不過要是你還沒有用過此類的javascript引

隨機森林 演算法原理詳解與實現步驟

#include <cv.h> // opencv general include file #include <ml.h> // opencv machine learning include file #include <stdio.h>

微信小程式 js詳解

data - 實現頁面的初始化資料 onLoad - 是生命週期函式,用來監聽頁面載入,一個頁面只會呼叫一次,它的引數可以獲取wx.navigateTo和wx.redirectTo及< navigator/>中的query. onReady - 同樣是生命週

vue-cli中的ESlint配置檔案eslintrc.js詳解

本文講解vue-cli腳手架根目錄檔案.eslintrc.jseslint簡介eslint是用來管理和檢測js程式碼風格的工具，可以和編輯器搭配使用，如vscode的eslint外掛 當有不符合配置檔案內容的程式碼出現就會報錯或者警告安裝eslintnpm init -y n

JS 詳解 Cookie、 LocalStorage 與 SessionStorage

場景 易用 obj 針對 tle 理解 oca span flash 基本概念 Cookie Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4KB左右。它的主要用途有保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”，這通常就是通

react-native 呼叫原生模組詳解

 一，繼承 ReactContextBaseJavaModule 實現如下方法 自定義方法用 @ReactMethod註釋 /** * 日誌列印module * Created by ybj on 2016/2/26.

前端框架vue.js詳解

Vue.js 是一個JavaScriptMVVM庫，是一套構建使用者介面的漸進式框架。 摘要 2016年最火的前端框架當屬Vue.js了，很多使用過vue的程式設計師這樣評價它，“vue.js兼具angular.js和react.js的優點，並剔除了它們的缺點”。授予了