模擬運動 · 編程開發筆記

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); }