當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript 实现简单的移动和缓动的效果
生活随笔
收集整理的這篇文章主要介紹了
JavaScript 实现简单的移动和缓动的效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
一、HTML布局
二、CSS布局
三、JavaScript代碼——移動
?四、JavaScript代碼——緩動
五、完整代碼?
一、HTML布局
簡單定義兩個盒子，一個做移動效果、一個做緩動效果。
<div class="box box1"></div><div class="box box2"></div>二、CSS布局
為兩個盒子定義寬高和背景色，隨便做個效果哦！能看就管，
<style>*{padding:0px;margin:0px;}.box{width: 200px;height: 200px;background: blue;position: absolute;left:0px;}.box2{background: red;margin-top: 210px;}</style>三、JavaScript代碼——移動
1.獲取元素
把剛才html定義的元素獲取過來在js中運用。
var box1 = document.querySelector('.box1'); var box2 = document.querySelector('.box2');2.封裝函數實現移動
num：定義盒子每次都移動h1個像素。
target： 每次移動的距離。
if判斷：通過if來判斷，到達了設定距離，就會刪除間隔函數。
box.style.left：沒有達到距離，一直賦值給‘盒子’左邊距。
myRun：給盒子設計點擊事件，點擊才會出現移動，this指向box1，里面是所調用的值，可以直接在里面修改，移動一次的距離，一共移動的距離。
function myRun(box,h1,h2){ var myInter = setInterval(function(){ var offsetLeft = box.offsetLeft; var num = h1; var target = h2; if(offsetLeft==target){ clearInterval(myInter);}else{box.style.left = offsetLeft+num+'px';}},1000)}box1.onclick=function(){myRun(this,50,200); }移動效果
?四、JavaScript代碼——緩動
與移動同理使用函數來封裝，代碼大致與js移動相同，中間判斷與上文稍微有些不同，其中的含義是，第一次移動取移動距離的十分之一，接下來的每一次移動，都是取省下來還剩多少距離的十分之一，取整是為了，在無線接近于所設置的距離可以移動。
function move(obj,sum){var liLi = setInterval(function(){var offsetLeft =obj.offsetLeft;var num = (sum - offsetLeft)/10;num > 0 ? Math.ceil(num):Math.floor(num);if(offsetLeft==sum){clearInterval(liLi);}else{obj.style.left = offsetLeft+num+'px';}},1000)} box2.onclick=function(){move(this,200);}緩動效果
五、完整代碼?
1.移動代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>移動</title><style>* {padding: 0px;margin: 0px;}.box {width: 200px;height: 200px;background: blue;position: absolute;left: 0px}.box2 {background: red;margin-top: 210px;}</style> </head><body><div class="box box1"></div><div class="box box2"></div><script>var box1 = document.querySelector('.box1');var box2 = document.querySelector('.box2');function myRun(box, h1, h2) {var myInter = setInterval(function () {var offsetLeft = box.offsetLeft;var num = h1;var target = h2;if (offsetLeft == target) {clearInterval(myInter);} else {box.style.left = offsetLeft + num + 'px';}}, 1000)}box1.onclick = function () {myRun(this, 50, 200);} </script> </body></html>2.緩動效果
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>移動</title><style>* {padding: 0px;margin: 0px;}.box {width: 200px;height: 200px;background: blue;position: absolute;left: 0px}.box2 {background: red;margin-top: 210px;}</style> </head><body><div class="box box1"></div><div class="box box2"></div><script>var box1 = document.querySelector('.box1');var box2 = document.querySelector('.box2');function move(obj, sum) {var liLi = setInterval(function () {var offsetLeft = obj.offsetLeft;var num = (sum - offsetLeft) / 10;num > 0 ? Math.ceil(num) : Math.floor(num);if (offsetLeft == sum) {clearInterval(liLi);} else {obj.style.left = offsetLeft + num + 'px';}}, 1000)} box2.onclick = function () {move(this, 200);}</script> </body></html>總結
以上是生活随笔為你收集整理的JavaScript 实现简单的移动和缓动的效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Linux】【RedHat】下载 安装
- 下一篇： 视觉应用工程师 篇二