02animate.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0 } .box { width: 100px; height: 100px; background-color: pink; position: relative; left: 1000px; } .box2 { background-color: blue; } </style> </head> <body> <button id="btn">运动到400</button> <button id="btn2">运动到800</button> <div class="box"></div> <div class="box box2" id="box2"></div> <script src="sport.js"></script> <script> var btn = document.querySelector("#btn"); var btn2 = document.querySelector("#btn2"); var box = document.querySelector(".box"); var box2 = document.querySelector("#box2"); btn.onclick = function () { //animate(box,400); //animate(box2,400); move(box,400,"left"); move(box2,400,"left"); } btn2.onclick = function () { animate(box,800); animate(box2,800); } var timeId = null; function animate(ele, target) { if(ele.timeId) { clearInterval(ele.timeId); ele.timeId = null; } var step = 9; // 步长 ele.timeId = setInterval(() => { /* if (ele.offsetLeft >= target) { ele.style.left = target + "px"; return clearInterval(ele.timeId); } */ // 假如物体元一开始在终点右侧 应该往左移动 if(ele.offsetLeft > target) { step = -Math.abs(step); } if(Math.abs(ele.offsetLeft - target) < Math.abs(step)) { ele.style.left = target + "px"; return clearInterval(ele.timeId); } ele.style.left = ele.offsetLeft + step + "px"; }, 30); } </script> </body> </html>
鼠标放在按钮上透明度慢慢变化
03animate.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0 } .box { width: 100px; height: 100px; background-color: pink; position: relative; left: 1000px; opacity: .3; } </style> </head> <body> <div class="box"></div> <script src="sport.js"></script> <script> var box = document.querySelector(".box"); // 放入div 透明度变为1 box.onmouseover = function() { //startMove(100); move(this,100,"opacity"); } box.onmouseout = function() { //startMove(30); move(this,30,"opacity"); } var num = 30; var timeId = null; function startMove(target) { clearInterval(timeId); timeId = setInterval(()=>{ var speed = target - num > 0? 1: -1; if(num === target) { clearInterval(timeId); } else { num += speed; box.style.opacity = num/100; console.log(num); } },30); } </script> </body> </html>
04computedStyle.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box1 { width: 120px; height: 120px; background-color: red; padding: 5px; border: 2px solid orange; opacity: .4; } </style> </head> <body> <div class="box1" style="width: 160px;" id="box1"></div> <script> var box1 = document.querySelector("#box1"); // console.log(box1.style.width); 只能行内样式 //console.log(box1.offsetWidth); var attr = "height" console.log(getComputedStyle(box1).width); console.log(getComputedStyle(box1)['width']); function getStyle(obj,attr) { if (window.getComputedStyle) { return getComputedStyle(obj,false)[attr]; } else { return obj.currentStyle[attr]; } } //alert(getStyle(box1,"border")); alert(typeof getStyle(box1,"opacity")); </script> </body> </html>
运动函数支持多物体运动
sport.js
// obj 运动的元素 // target 目标值 // attr 操作的属性 function move(obj, target, attr) { clearInterval(obj.timer); var speed = 0; if (attr === "opacity") { current = parseFloat(getStyle(obj, attr)) * 100; // "1"*100 speed = target - current > 0 ? 1 : -1; } else { current = parseInt(getStyle(obj, attr)); speed = target - current > 0 ? 10 : -10; } obj.timer = setInterval(() => { if (attr === "opacity") { current = parseFloat(getStyle(obj, attr)) * 100; // "1"*100 obj.style[attr] = (current + speed) / 100; } else { current = parseInt(getStyle(obj, attr)); obj.style[attr] = (current + speed) + "px"; } if (Math.abs(target - current) < Math.abs(speed)) { if (attr === "opacity") { obj.style[attr] = target / 100; } else { obj.style[attr] = target + "px"; } return clearInterval(obj.timer); } }, 30); } // 300px 200px //100+10+10+10 function getStyle(obj, attr) { if (window.getComputedStyle) { return getComputedStyle(obj, false)[attr]; } else { return obj.currentStyle[attr]; } }
sport2.js
// obj 运动的元素 // target 目标值 // attr 操作的属性 function move(obj, target, attr,callback) { clearInterval(obj.timer); var speed = 0; if (attr === "opacity") { current = parseFloat(getStyle(obj, attr)) * 100; // "1"*100 speed = target - current > 0 ? 1 : -1; } else { current = parseInt(getStyle(obj, attr)); speed = target - current > 0 ? 10 : -10; } obj.timer = setInterval(() => { if (attr === "opacity") { current = parseFloat(getStyle(obj, attr)) * 100; // "1"*100 obj.style[attr] = (current + speed) / 100; } else { current = parseInt(getStyle(obj, attr)); obj.style[attr] = (current + speed) + "px"; } if (Math.abs(target - current) < Math.abs(speed)) { if (attr === "opacity") { obj.style[attr] = target / 100; } else { obj.style[attr] = target + "px"; } clearInterval(obj.timer); if(callback) { callback(); } } }, 30); } // 300px 200px //100+10+10+10 function getStyle(obj, attr) { if (window.getComputedStyle) { return getComputedStyle(obj, false)[attr]; } else { return obj.currentStyle[attr]; } }
