《 1 封装缓动动画函数：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} #box{ width: 100px; height: 100px; background-color: #0c80dc; position: absolute; } </style> </head> <body> <button id="btn">往右走</button> <button id="btn1">往左走</button> <div id="box"></div> <script src="js/MyFunc.js"></script> <script> window.onload=function (){ var box=$('box'); //向右走 $('btn').onclick=function (ev) { buffer(box,800); } //向右走 $('btn1').onclick=function (ev) { buffer(box,500); } } /** * 缓动动画函数 * @param （Object）eleObj * @param （Number）target */ function buffer(eleObj, target) { //1先清后设 clearInterval(eleObj.timer); //1.1定义变量 var speed=0; //1.2设置定时器 eleObj.timer=setInterval(function (){ //2.3求出步长 speed=(target-box.offsetLeft)*0.2; //步数取整 speed=(target>eleObj.offsetLeft) ? Math.ceil(speed) : Math.floor(speed); //2.4动起来 eleObj.style.left= eleObj.offsetLeft+speed+'px'; eleObj.innerText= eleObj.offsetLeft; //2.5清除定时器 if ( eleObj.offsetLeft===target){ clearInterval( eleObj.timer); } },20); } </script> </body> </html>《2 动态设置元素属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} #box{ width: 150px;height: 150px;background-color: red; } </style> </head> <body> <button id="btn">改变颜色</button> <button id="btn1">改变长度</button> <div id="box"></div> <script src="js/MyFunc.js"></script> <script> //改颜色 $('btn').onclick=function () { //$('box').style.background='green'; changeCssStyle($('box'),'background','green'); } //改长度 $('btn1').onclick=function () { //$('box').style.width='1000px'; changeCssStyle($('box'),'width','1000px'); } /** * 改变标签的css属性值 * @param (Object)eleObj * @param (String)attr * @param (String / Number)value */ function changeCssStyle(eleObj,attr,value) { //eleObj.style.attr=value; //下标方式改变css属性 eleObj.style[attr]=value; } </script> </body> </html>《3 JS 获取css的样式：
在开发中，我们想要获取css的样式。通常采用：box.style.top box.style.backgroundColor等，但这种方式只能得到行内样式，而平常用的最多的是页内样式或者外部样式，解决这种问题
解决：兼容写法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 200px; height: 200px; background-color: red; border: 5px solid #000; } </style> </head> <body> <div id="box" ></div> <button id="btn">获取属性值</button> <script> var box=document.getElementById('box'); var btn=document.getElementById('btn'); btn.onclick=function () { // console.log(box.style.width); // console.log(box.style.height); // console.log(box.style.backgroundColor); // console.log(box.style.border); console.log(getStyleAttr(box, 'width')); console.log(getStyleAttr(box, 'height')); console.log(getStyleAttr(box, 'bored')); }; function getStyleAttr(obj,attr) { if (obj.currentStyle){//IE和opera return obj.currentStyle[attr]; }else { return window.getComputedStyle(obj,null)[attr]; } } </script> </body> </html>《4 封装缓动动画函数---透明度
css设置透明度如上，用js来做的的透明度就更加方便
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{ background-color: #0f0f0f; } #box{ width: 100px; height: 100px; background-color: red; position: absolute; /*设置透明度*/ /*opacity: 0.2;*/ /*filter: alpha(opacity=50);*/ } </style> </head> <body> <button id="btn">往右走</button> <button id="btn1">往左走</button> <div id="box"></div> <script src="js/myFunc.js"></script> <script> window.onload=function (ev) { var box=$('box'); $("btn").onclick = function () { buffer(box, {"left": 800,"top":100,"width":600,"height":700,"opacity":0.5},function () { buffer(box, {"left": 100,"top":300,"width":400,"height":500,"opacity":0.3},function () { buffer(box, {"left": 300,"top":200,"width":200,"height":200},null) }); }); }; }; </script> </body> </html>
