JavaScript元素上下彈性運動
分享一段程式碼例項,它實現了元素上下彈性運動效果,類似於一個小球能夠上下彈動的現象。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body { margin: 0; padding: 0; } #box { width: 50px; height: 50px; background: red; position: absolute; left: 0; top: 0; margin: 0; } </style> <script> window.onload = function() { oDiv = document.getElementById('box'); var l = 0; var t = 0; var ispeedX = 0; var ispeedY = 0; var timer = null; oDiv.onmousedown = function(ev) { clearInterval(timer); var ev = ev || event; var disX = ev.clientX - oDiv.offsetLeft; var disY = ev.clientY - oDiv.offsetTop; document.onmousemove = function(ev) { var ev = ev || event; oDiv.style.left = ev.clientX - disX + 'px'; oDiv.style.top = ev.clientY - disY + 'px'; ispeedX = oDiv.offsetLeft - l; ispeedY = oDiv.offsetTop - t; l = oDiv.offsetLeft; t = oDiv.offsetTop; } //onmousemove document.onmouseup = function() { document.onmousemove = null; clearInterval(timer); boomMove(oDiv); function boomMove(obj) { var clientX = document.documentElement.clientWidth - obj.offsetWidth || document.body.clientWidth - obj.offsetWidth; var clientY = document.documentElement.clientHeight - obj.offsetHeight || document.body.clientHeight - obj.offsetHeight; timer = setInterval(function() { ispeedY += 3; var x = obj.offsetLeft + ispeedX; var t = obj.offsetTop + ispeedY; if (x > clientX) { x = clientX; ispeedX *= -1; }; if (x < 0) { x = 0; ispeedX *= -1; }; if (t > clientY) { t = clientY; ispeedY *= -0.8; ispeedX *= 0.9; }; if (t < 0) { t = 0; ispeedY *= -1 }; obj.style.left = x + 'px'; obj.style.top = t + 'px'; if (Math.abs(ispeedX) < 1) { ispeedX = 0; }; if (Math.abs(ispeedY) < 1) { ispeedY = 0; }; if (ispeedX == 0 && ispeedY == 0 && oDiv.offsetTop == clientY) { clearInterval(timer); } }, 30); } } } } </script> </head> <body> <div id="box"></div> </body> </html>
相關文章
- javascript div元素彈性緩衝運動程式碼例項JavaScript
- JavaScript 元素跟隨滑鼠運動JavaScript
- recyclerview 彈性滑動 + 中間元素放大View
- javascript緩衝彈性方式設定元素的尺寸JavaScript
- 寫一個上下拉動到底時有彈性的listviewView
- javascript元素水平運動程式碼例項JavaScript
- JavaScript 調整li元素上下順序JavaScript
- javascript元素勻速運動程式碼例項JavaScript
- 元素水平垂直居中【彈性佈局 || Translate】
- JavaScript元素抖動效果JavaScript
- 雲端計算的彈性和自動化運維淺析運維
- js元素上下移動效果程式碼例項JS
- javascript實現的多元素緩衝運動程式碼例項JavaScript
- JavaScript 數字上下滾動抽獎JavaScript
- iOS textField鍵盤彈出/收起 自動上下移iOS
- 蘇寧運動A元素淘寶店
- JavaScript動態建立元素和追加元素JavaScript
- SVG 動畫實現彈性的頁面元素效果SVG動畫
- javascript動態改變iframe元素src屬性程式碼例項JavaScript
- JavaScript運動框架JavaScript框架
- JavaScript動態新增li元素JavaScript
- JavaScript動態生成html元素JavaScriptHTML
- JavaScript之多小球非對心彈性碰撞JavaScript
- 原生javascript如何設定元素的屬性JavaScript
- JavaScript判斷元素是否具有required屬性JavaScriptUI
- javascript delete運算子刪除array陣列元素JavaScriptdelete陣列
- JavaScript 拖動調整元素尺寸JavaScript
- JavaScript設定元素float浮動JavaScript
- JavaScript拖動div元素詳解JavaScript
- JavaScript 緩衝運動JavaScript
- JavaScript數字上下翻動變化詳解JavaScript
- 動態生成HTML元素併為元素追加屬性HTML
- javascript操作html元素屬性簡單介紹JavaScriptHTML
- javascript如何判斷元素是否具有指定屬性JavaScript
- JavaScript使用name屬性值獲取元素物件JavaScript物件
- 滑鼠懸浮元素上下滑動增加或者減少高度效果
- JavaScript彈性固定於網頁右側詳解JavaScript網頁
- JavaScript 動態新增與刪除元素JavaScript