JS09(三个取整函数、缓动动画原理、封装基本函数、访问css属性、得到css样式、返回当前样式的函数、封装运动框架基本函数【单个属性】、封装运动框架基本函数【多个属性】、 json遍历、运动框架【最终封装(透明度)】基本函数、手风琴效果
三个取整函数
<script> //向上取整数 console.log(Math.ceil(1.01)) console.log(Math.ceil(1.9)) console.log(Math.ceil(-1.3)) //floor 地板 向下取整 console.log(Math.floor(1.01)) console.log(Math.floor(1.9)) console.log(Math.floor(-1.3)) // 四舍五入 console.log(Math.round(1.01)) console.log(Math.round(1.5)) </script>
缓动动画原理
<script> var btn = document.getElementById("btn"); var box = document.getElementById("box"); var target = 400; var timer = null; btn.onclick = function() { timer = setInterval(function() { // 盒子本身的位置 + 步长 (不断变化的) var step = (target - box.offsetLeft) / 10; // 步长 console.log(step); step = step > 0 ? Math.ceil(step) : Math.floor(step); // 步长取整 box.style.left = box.offsetLeft + step + "px"; if(box.offsetLeft == target) // 判断结束条件 { clearInterval(timer); alert("到目标了") } },30) } </script>
封装基本函数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; opacity: 0.3; } </style> </head> <body> <button id="btn200">200</button> <button id="btn400">400</button> <div id="box"></div> </body> </html> <script> var btn200 = document.getElementById("btn200"); var btn400 = document.getElementById("btn400"); var box = document.getElementById("box"); btn200.onclick = function() { animate(box,200); } btn400.onclick = function() { animate(box,400); } function animate(obj,target){ // 第一个参数 动谁 第二个参数 动多少 clearInterval(obj.timer); obj.timer = setInterval(function() { // 计算步长 动画的原理 盒子本身的位置 + 步长 var step = (target - obj.offsetLeft) / 10; // 步长 step = step > 0 ? Math.ceil(step) : Math.floor(step); // 取整步长 // obj.style.left = 盒子本身的位置 + 步长 obj.style.left = obj.offsetLeft + step + "px"; if(obj.offsetLeft == target){ clearInterval(obj.timer); } },30) } </script>
访问css属性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; left: 10px; position: absolute; top: 20px; } </style> </head> <body> <div id="box" style="left:30px;width: 100px;height: 100px;"></div> </body> </html> <script> var box =document.getElementById("box"); console.log(box.style.left); console.log(box.style["left"]); function fn(attr){ console.log(box.style[attr]); } fn("height"); fn("width"); </script>
得到css设置样式
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 200px; background-color: pink; left: 10px; position: absolute; } </style> </head> <body> <div id="demo"></div> </body> </html> <script> var demo = document.getElementById("demo"); console.log(demo.style.left); // 得到的是空值 只能取行内 //console.log(demo.currentStyle.left); // ie这么写 console.log(window.getComputedStyle(demo,null).left); </script>
返回当前样式的函数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 200px; position: absolute; top: 10px; left: 20px; background-color: pink; z-index: 2; opacity: 0.4; } </style> </head> <body> <div id="demo"></div> </body> </html> <script> var demo = document.getElementById("demo"); function getStyle(obj,attr) { // 谁的 那个属性 if(obj.currentStyle) // ie 等 { return obj.currentStyle[attr]; // 返回传递过来的某个属性 } else { return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器 } } console.log(getStyle(demo,"width"));
封装运动框架基本函数(单个属性)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 50px; } </style> </head> <body> <button id="btn200">200</button> <button id="btn400">400</button> <div id="box"></div> </body> </html> <script> var btn200 = document.getElementById("btn200"); var btn400 = document.getElementById("btn400"); var box = document.getElementById("box"); btn200.onclick = function() { animate(box,"left",500); } btn400.onclick = function() { animate(box,"top",400); } // 封装单个属性的运动框架 function animate(obj,attr,target) { // 给谁 什么属性 改为多少 clearInterval(obj.timer); obj.timer = setInterval(function() { //计算步长 动画的原理 盒子本身的样式 + 步长 //我们怎么知道我们当前的样式 // 先得到 当前的样式，然后 用 target 减去 就可以 除以 10 计算步长 var current = parseInt(getStyle(obj,attr)); // 得到当前的样式 别忘乐去掉px var step = ( target -current ) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); // 要做动画了 //obj.style.left = obj.offsetLeft + step + "px"; obj.style[attr] = current + step + "px"; if(current == target ) { clearInterval(obj.timer); } //console.log(current); } ,30) } function getStyle(obj,attr) { // 谁的 那个属性 if(obj.currentStyle) // ie 等 { return obj.currentStyle[attr]; // 返回传递过来的某个属性 } else { return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器 } } </script>
封装运动框架基本函数(多个属性)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 50px; border-radius: 50%; } </style> </head> <body> <button id="btn200">200</button> <button id="btn400">400</button> <div id="box"></div> </body> </html> <script> var btn200 = document.getElementById("btn200"); var btn400 = document.getElementById("btn400"); var box = document.getElementById("box"); btn200.onclick = function() { animate(box,{width: 200, top: 800,left: 200}); } btn400.onclick = function() { animate(box,{top:500}); } // 多个属性运动框架 function animate(obj,json) { // 给谁 json clearInterval(obj.timer); obj.timer = setInterval(function() { //开始遍历 json for(var attr in json){ // attr 属性 json[attr] 值 // 计算步长 用 target 位置 减去当前的位置 除以 10 // console.log(attr); var current = parseInt(getStyle(obj,attr)); // 数值 // console.log(current); // 目标位置就是 属性值 var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10 step = step > 0 ? Math.ceil(step) : Math.floor(step); obj.style[attr] = current + step + "px" ; } },30) } function getStyle(obj,attr) { // 谁的 那个属性 if(obj.currentStyle) // ie 等 { return obj.currentStyle[attr]; // 返回传递过来的某个属性 } else { return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器 } } </script>
json遍历
<script> var arr = [1,3,5,7,9]; console.log(arr[3]); for(var i = 0; i< arr.length;i++) // 遍历数组 { console.log(arr[i]); } var json = {width:200,height:300,left:50} console.log(json.width); for(var k in json) { console.log(k); // k 遍历的是json 可以得到的是 属性 console.log(json[k]); // json[k] 得到 是属性的 值 } </script>
运动框架【最终封装(透明度)】基本函数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 50px; border-radius: 50%; } </style> </head> <body> <button id="btn200">200</button> <button id="btn400">400</button> <div id="box"></div> </body> </html> <script> var btn200 = document.getElementById("btn200"); var btn400 = document.getElementById("btn400"); var box = document.getElementById("box"); btn200.onclick = function() { animate(box,{width: 200, top: 100,left: 200,opacity:40,zIndex:3},function(){alert("我来了")}); } btn400.onclick = function() { animate(box,{top:500}); } // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { // 给谁 json clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面 for(var attr in json){ // attr 属性 json[attr] 值 //开始遍历 json // 计算步长 用 target 位置 减去当前的位置 除以 10 // console.log(attr); var current = 0; if(attr == "opacity") { current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0; console.log(current); } else { current = parseInt(getStyle(obj,attr)); // 数值 } // console.log(current); // 目标位置就是 属性值 var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10 step = step > 0 ? Math.ceil(step) : Math.floor(step); //判断透明度 if(attr == "opacity") // 判断用户有没有输入 opacity { if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity { // obj.style.opacity obj.style.opacity = (current + step) /100; } else { // obj.style.filter = alpha(opacity = 30) obj.style.filter = "alpha(opacity = "+(current + step)* 10+")"; } } else if(attr == "zIndex") { obj.style.zIndex = json[attr]; } else { obj.style[attr] = current + step + "px" ; } if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面 { flag = false; } } if(flag) // 用于判断定时器的条件 { clearInterval(obj.timer); //alert("ok了"); if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调 { fn(); // 函数名 + （） 调用函数 执行函数 } } },30) } function getStyle(obj,attr) { // 谁的 那个属性 if(obj.currentStyle) // ie 等 { return obj.currentStyle[attr]; // 返回传递过来的某个属性 } else { return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器 } } </script>
手风琴效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul{list-style: none} *{margin:0; padding:0;} div{ width: 1150px; height: 400px; margin:50px auto; border:1px solid red; overflow: hidden; } div li { width: 240px; height: 400px; float: left; } div ul { width: 1300px; } </style> </head> <body> <div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> <script src="animate.js"></script> <script> var box = document.getElementsByTagName("div")[0]; var lis = box.children[0].children; for(var i=0;i<lis.length;i++) { lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)"; lis[i].onmouseover = function() { for(var i=0;i<lis.length;i++) { animate(lis[i],{width:100}); } animate(this,{width:800}); } lis[i].onmouseout = function(){ for(var i=0;i<lis.length;i++) { animate(lis[i],{width:240}); } } } </script>
