當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript简易的动画效果
生活随笔
收集整理的這篇文章主要介紹了
javascript简易的动画效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
JavaScript做一個簡易的動畫效果，主要還是要注意的是js部分
再寫兩個div做成豎線，各自給一個不同的內(nèi)名，在script用來做檢測判斷用的
還有再加兩個input標簽或者button標簽，各給一個id名? 如下圖：
- <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>#box {width: 100px;height: 100px;background-color: pink;position: absolute;top: 100px;left: 0px;}.line400 {width: 1px;height: 100px;background-color: red;position: absolute;left: 400px;top: 100px;}.line800 {width: 1px;height: 100px;background-color: red;position: absolute;left: 800px;top: 100px;} </style> <body><div id="box"></div><div class="line400"></div><div class="line800"></div><input type="button" value="右移400" id="r1"><input type="button" value="右移800" id="r2"><script>var box = document.getElementById("box");//獲取‘box’的id名var btnR1 = document.getElementById("r1");//獲取‘按鈕1’的id名var btnR2 = document.getElementById("r2");//獲取‘按鈕2’的id名btnR1.onclick = function () {Animation(box, 400);};btnR2.onclick = function () {Animation(box, 800);};// 封裝動畫函數(shù)function Animation(ele, target) {// 先清除動畫clearInterval(ele.tid);// 獲取當(dāng)前位置var currentLeft = ele.offsetLeft;// 判斷左移右移var isLeft = (currentLeft < target);// 開啟定時器ele.tid = setInterval(function () {// 移動currentLeft = isLeft ? currentLeft + 10 : currentLeft - 10;ele.style.left = currentLeft + "px";// 邊界檢測if (isLeft ? currentLeft >= target : currentLeft <= target) {// 停止運動clearInterval(ele.tid);// 元素復(fù)位ele.style.left = target + "px";}}, 50)}</script> </body> </html>
總結(jié)
以上是生活随笔為你收集整理的javascript简易的动画效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 超火的ipad procreate必备神
- 下一篇： 【AD】Altium Designer