Demo - 演示地址:http://a-1.vip/demo/exercise
Demo - 原生js 輪播圖:http://a-1.vip/demo/slideshow
// 拖拽方法
// 當鼠標被按下、
demo.onmousedown = function(coord) {
// 判斷為鼠標左鍵、
if (coord.button == 0) {
var _this = this;
// 當鼠標移動、
document.onmousemove = function(e) {
_this.style.left = e.pageX - coord.offsetX + 'px';
_this.style.top = e.pageY - coord.offsetY + 'px';
}
// 當鼠標抬起、
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
// startMove(_this);
}
}
}
//························································································
// 勻速運動
function balanceSports(event, speed, locX, locY) {
clearInterval(event.timer);
locX = locX - event.offsetLeft > 0 ? locX - event.offsetWidth : locX;
locY = locY - event.offsetTop > 0 ? locY - event.offsetHeight : locY;
var spX = locX - event.offsetLeft > 0 ? speed : -speed;
var spY = locY - event.offsetTop > 0 ? speed : -speed;
event.timer = setInterval(function() {
if (Math.abs(locX - event.offsetLeft) < Math.abs(spX) && Math.abs(locY - event.offsetTop) < Math.abs(spY)) {
clearInterval(event.timer);
} else if (Math.abs(locX - event.offsetLeft) < Math.abs(spX)) {
spX = 0;
event.style.left = locX + 'px';
} else if (Math.abs(locY - event.offsetTop) < Math.abs(spY)) {
spY = 0;
event.style.top = locY + 'px';
} else {
event.style.left = event.offsetLeft + spX + 'px';
event.style.top = event.offsetTop + spY + 'px';
}
}, 10);
}
// 緩沖運動
function bufferSports(event, speed, locX, locY) {
clearInterval(event.timer);
locX = locX - event.offsetLeft > 0 ? locX - event.offsetWidth : locX;
locY = locY - event.offsetTop > 0 ? locY - event.offsetHeight : locY;
event.timer = setInterval(function() {
var spX = (locX - event.offsetLeft) / speed;
spX = spX > 0 ? Math.ceil(spX) : Math.floor(spX);
var spY = (locY - event.offsetTop) / speed;
spY = spY > 0 ? Math.ceil(spY) : Math.floor(spY);
if (locX - event.offsetLeft == 0 && locY - event.offsetTop == 0) {
clearInterval(event.timer);
} else {
event.style.left = event.offsetLeft + spX + 'px';
event.style.top = event.offsetTop + spY + 'px';
}
}, 10)
}
多屬性變化·運動實例:http://a-1.vip/demo/exercise/index2.html
// 支持多個屬性動態變化,緩沖運動 bufferMove(元素,屬性對象,速度,回調函數)
// bufferMove(this, {top: '150px',left: '300px',width: '600px',height: '600px',opacity: '0.05'}, 17, function() {console.log('Hello World~');});
function bufferMove(event, attrObj, speed, callback) {
// 兼容寫法:取style樣式屬性、
function getStyle(dom, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(dom, null)[attr];
} else {
return dom.currentStyle[attr];
}
}
// 每次執行時結束上一次的定時器、
clearInterval(event.timer);
var peed = null, // 每次運動的速度、
current = null, // 當前位置、
target = null; // 終點位置、
event.timer = setInterval(function() {
var trigger = true;
for (var key in attrObj) {
if (key == 'opacity') {
target = parseFloat(attrObj[key]) * 100;
current = parseFloat(getStyle(event, key)) * 100;
} else {
target = parseFloat(attrObj[key]);
current = parseInt(getStyle(event, key));
}
peed = (target - current) / speed;
peed = peed > 0 ? Math.ceil(peed) : Math.floor(peed);
if (key == 'opacity') {
event.style[key] = (current + peed) / 100;
} else {
event.style[key] = current + peed + 'px';
}
if (target != current) {
trigger = false;
}
}
if (trigger) {
clearInterval(event.timer);
typeof(callback) === 'function' ? callback(): null; // 回調函數、
}
}, 20)
}
// 支持多個屬性動態變化,彈性運動 elasticMove(元素,屬性對象,回調函數)
// elasticMove(this, {top: '150px',left: '300px',width: '600px',height: '600px',opacity: '0.05'}, 17, function() {console.log('Hello World~');});
function elasticMove(event, attrObj, callback) {
// 兼容寫法:取style樣式屬性、
function getStyle(dom, attr) {
if (window.getComputedStyle) {
return window.getComputedStyle(dom, null)[attr];
} else {
return dom.currentStyle[attr];
}
}
// 每次執行時結束上一次的定時器、
clearInterval(event.timer);
var f = 11, // 力度、
m = 0.85; // 阻力、
var speed = [];
for (var key in attrObj) {
speed[key] = 0;
}
event.timer = setInterval(function() {
var trigger = true;
for (var key in attrObj) {
trigger = false;
if (key == 'opacity') {
target = parseFloat(attrObj[key]) * 100;
current = parseFloat(getStyle(event, key)) * 100;
} else {
target = parseFloat(attrObj[key]);
current = parseInt(getStyle(event, key));
}
var a = (target - current) / f;
speed[key] += a;
speed[key] *= m;
if (key == 'opacity') {
event.style[key] = (current + speed[key]) / 100;
} else {
event.style[key] = current + speed[key] + 'px';
}
if (Math.abs(speed[key]) < 1 && Math.abs(target - current) < 1) {
event.style[key] = attrObj[key];
delete attrObj[key];
break;
}
}
if (trigger) {
clearInterval(event.timer);
typeof(callback) === 'function' ? callback(): null; // 回調函數、
}
}, 25)
}
模擬重力場·拖拽實例:http://a-1.vip/demo/exercise/index3.html
// 模擬重力場,彈性運動。startMove(元素對象, speedX, speedY)
function startMove(event, speedX, speedY) {
var g = 3;
clearInterval(event.timer);
event.timer = setInterval(function() {
speedY += g;
var newLeft = event.offsetLeft + speedX;
var newTop = event.offsetTop + speedY;
var dom = document.documentElement;
// console.log(dom.clientHeight - event.clientHeight - newTop, dom.clientHeight, event.offsetHeight);
// 判斷event元素是否到頂邊、
if (newTop <= 0) {
speedY *= -1;
speedX *= 0.8;
speedY *= 0.8;
newTop = 0;
}
// 判斷event元素是否到左邊、
if (newLeft <= 0) {
speedX *= -1;
speedX *= 0.8;
speedY *= 0.8;
newLeft = 0;
}
// 判斷event元素是否到底邊、
if (newTop >= dom.clientHeight - event.clientHeight) {
speedY *= -1;
speedX *= 0.8;
speedY *= 0.8;
newTop = dom.clientHeight - event.clientHeight;
}
// 判斷event元素是否到右邊、
if (newLeft >= dom.clientWidth - event.clientWidth) {
speedX *= -1;
speedX *= 0.8;
speedY *= 0.8;
newLeft = dom.clientWidth - event.clientWidth;
}
// 判斷是否接近于0、
speedX = Math.abs(speedX) < 1 ? 0 : speedX;
speedY = Math.abs(speedY) < 1 ? 0 : speedY;
// 判斷是否結束、
if (speedX == 0 && speedY == 0 && newTop == dom.clientHeight - event.clientHeight) {
clearInterval(event.timer);
} else {
event.style.left = newLeft + 'px';
event.style.top = newTop + 'px';
}
}, 20);
}
- 前端工具庫
- HTML
- CSS
- 實用樣式
- JavaScript
- 模擬運動
- 深入數組擴展
- JavaScript_補充
- jQuery
- 自定義插件
- 網絡 · 后端請求
- css3.0 - 2019-2-28
- 選擇器
- 邊界樣式
- text 字體系列
- 盒子模型
- 動圖效果
- 其他
- less - 用法
- scss - 用法 2019-9-26
- HTML5 - 2019-3-21
- canvas - 畫布
- SVG - 矢量圖
- 多媒體類
- H5 - 其他
- webpack - 自動化構建
- webpack - 起步
- webpack -- 環境配置
- gulp
- ES6 - 2019-4-21
- HTML5補充 - 2019-6-30
- 微信小程序 2019-7-8
- 全局配置
- 頁面配置
- 組件生命周期
- 自定義組件 - 2019-7-14
- Git 基本操作 - 2019-7-16
- vue框架 - 2019-7-17
- 基本使用 - 2019-7-18
- 自定義功能 - 2019-7-20
- 自定義組件 - 2019-7-22
- 腳手架的使用 - 2019-7-25
- vue - 終端常用命令
- Vue Router - 路由 (基礎)
- Vue Router - 路由 (高級)
- 路由插件配置 - 2019-7-29
- 路由 - 一個實例
- VUEX_數據倉庫 - 2019-8-2
- Vue CLI 項目配置 - 2019-8-5
- 單元測試 - 2019-8-6
- 掛載全局組件 - 2019-11-14
- React框架
- React基本使用
- React - 組件化 2019-8-25
- React - 組件間交互 2019-8-26
- React - setState 2019-11-19
- React - slot 2019-11-19
- React - 生命周期 2019-8-26
- props屬性校驗 2019-11-26
- React - 路由 2019-8-28
- React - ref 2019-11-26
- React - Context 2019-11-27
- PureComponent - 性能優化 2019-11-27
- Render Props VS HOC 2019-11-27
- Portals - 插槽 2019-11-28
- React - Event 2019-11-29
- React - 渲染原理 2019-11-29
- Node.js
- 模塊收納
- dome
- nodejs - tsconfig.json
- TypeScript - 2020-3-5
- TypeScript - 基礎 2020-3-6
- TypeScript - 進階 2020-3-9
- Ordinary小助手
- uni-app
- 高德地圖api
- mysql
- EVENTS
- 筆記
- 關于小程序工具方法封裝
- Tool/basics
- Tool/web
- parsedUrl
- request