标签：pac oct 索引 定时 || 问题 tco 变化 hidden
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 20px; height: 20px; background-color: black; position: absolute; /*必须要有定位才能实现动画效果*/ left: 0; right: 0; } </style> </head> <body> <div class="box"></div> <script> var speedx = 3; // 设置每次移距离 var speedy = 3; // 设置每次移距离 var dv = document.getElementsByClassName("box")[0]; // 获取要移动的元素 这里使用的是ClassName 所以需要索引取出element_obj function move(el) { // 创建移动函数
var currentleft = parseInt(window.getComputedStyle(el).left); //实时获取当前标签的left距离并转化为int类型 var currenttop = parseInt(window.getComputedStyle(el).top); //实时获取当前标签的top距离并转化为int类型 var left = currentleft + speedx; //进行动态数据计算 var top = currenttop + speedy; //进行动态数据计算 el.style.left = `${left}px`; //通过style属性实时更改数据量 el.style.top = `${top}px`;//通过style属性实时更改数据量 } setInterval(function () { //设置定时任务 move(dv) },20) </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 20px; height: 20px; background-color: black; position: absolute; left: 0; right: 0; overflow: hidden; } </style> </head> <body> <div class="box"></div> <script> var speedx = 3; var speedy = 3; var dv = document.getElementsByClassName("box")[0]; function move(el) { var style = window.getComputedStyle(el); var currentleft = parseInt(style.left); var currenttop = parseInt(style.top);
check_border_collision(el); var left = currentleft + speedx; var top = currenttop + speedy; el.style.left = `${left}px`; el.style.top = `${top}px`; } function check_border_collision(el) { // 矫正函数 var style = window.getComputedStyle(el); // 获取box对象css属性 var left = parseInt(style.left); // 获取当前左边距 var top = parseInt(style.top); // 获取当前下距离 var w = parseInt(style.width); // 获取元素宽度 var h = parseInt(style.height); // 获取元素高度 if (left < 0 || left > window.innerWidth - w) { // 判断条件 如果box左边距距离小于0 或者大于浏览器宽度-元素宽度 left = 0; speedx *= -1; //反转移动 } if (top < 0 || top > window.innerHeight - h) {// 判断条件 如果box上边距距离小于0 或者大于浏览器高度-元素高度 top = 0; speedy *= -1; //反转移动 } } setInterval(function () { move(dv); //调用移动函数 }, 20) </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { overflow: hidden; } .box { width: 40px; height: 40px; background-color: black; position: absolute; left: 0; right: 0; overflow: hidden; } .box2 { width: 40px; height: 40px; background-color: black; position: absolute; left: 100px; right: 100px; overflow: hidden; } </style> </head> <body> <div class="box"></div> <div class="box2"></div> <script> var middleware_x; // 声明中间变量 用于存放交换变量 var middleware_y; // 声明中间变量 用于存放交换变量 var dv1 = document.getElementsByClassName("box")[0]; // 获取要移动的元素 这里使用的是ClassName 所以需要索引取出element_obj var dv2 = document.getElementsByClassName("box2")[0];// 获取要移动的元素 这里使用的是ClassName 所以需要索引取出element_obj // 分别设置box横纵坐标移动速度 dv1.speedx = 3; dv1.speedy = 5; dv2.speedx = 5; dv2.speedy = 3; // 移动函数 function move(el) { // el 为element_obj var style = window.getComputedStyle(el); // 获取标签的css属性obj var currentleft = parseInt(style.left); var currenttop = parseInt(style.top); check_border_collision(el); // 调用函数 用于碰到周围弹回 if (check_block_collision(dv1, dv2)) { // 条件判断 如果两个box碰撞 速度属性反转 先试用中间变量存储x,y速度在依次调换 middleware_x = dv1.speedx; middleware_y = dv1.speedy; dv1.speedx = dv2.speedx; dv1.speedy = dv2.speedy; dv2.speedx = middleware_x; dv2.speedy = middleware_y; } // 计算速度 var left = currentleft + el.speedx; var top = currenttop + el.speedy; // 更新至box标签 el.style.left = `${left}px`; el.style.top = `${top}px`; } function check_border_collision(el) { // 矫正函数 var style = window.getComputedStyle(el); // 获取box对象css属性 var left = parseInt(style.left); // 获取当前左边距 var top = parseInt(style.top); // 获取当前下距离 var w = parseInt(style.width); // 获取元素宽度 var h = parseInt(style.height); // 获取元素高度 if (left < 0 || left > window.innerWidth - w) { // 判断条件 如果box左边距距离小于0 或者大于浏览器宽度-元素宽度 left = 0; el.speedx *= -1; //反转移动 } if (top < 0 || top > window.innerHeight - h) {// 判断条件 如果box上边距距离小于0 或者大于浏览器高度-元素高度 top = 0; el.speedy *= -1; //反转移动 } } // 判断函数 用于判断两个box是否相撞 function check_block_collision(ev1, ev2) { var style1 = window.getComputedStyle(ev1); var style2 = window.getComputedStyle(ev2); var left1 = parseInt(style1.left); var left2 = parseInt(style2.left); var top1 = parseInt(style1.top); var top2 = parseInt(style2.top); var width1 = parseInt(style1.width); var width2 = parseInt(style2.width); var height1 = parseInt(style1.height); var height2 = parseInt(style2.height); // box坐标 x=left1+width/2 y=top+height/2 var center1 = { x: left1 + width1 / 2, y: top1 + height1 / 2 }; var center2 = { x: left2 + width2 / 2, y: top2 + height2 / 2 }; // 计算两个box的坐标差的绝对值 var diffx = Math.abs(center1.x - center2.x); var diffy = Math.abs(center1.y - center2.y); // 判断是否碰撞 如果x轴向大于两个box的宽之和且y轴大于两个box的高之和即为碰撞 if (diffx < (width1 + width2) / 2 && diffy < (height1 + height2) / 2) { return true } return false } // 设置定时器 setInterval(function () { move(dv1); //调用移动函数 move(dv2); }, 20) </script> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { overflow: hidden; } .box { width: 40px; height: 40px; background-color: black; position: absolute; left: 0; right: 0; opacity: 1; } </style> </head> <body> <div class="box" id="box1"></div> <script> // 封装函数 解决兼容问题 得到Style function getStyle(el) { // el指element节点 if (getComputedStyle) { return window.getComputedStyle(el) } else { return el.currentStyle } } function animate(el, properties) { //el指element节点 property指方向等但是只能使用默认的方向 left等 target 目标值 // property 新增透明模式 opacity var interval_id; //声明计时器id 如果抛错把这个声明至外部 var current; var speed; if (interval_id) { //如果有定时器 清除 clearInterval(interval_id); } interval_id = setInterval(function () { // 创建定时器函数 for (var property in properties) { var target = properties[property]; if (property === ‘opacity‘) { // 透明度特殊处理 current = Math.round(parseFloat(getStyle(el)["opacity"]) * 100) //获取element透明度并x100进行后续数据处理 该方法将进行上舍入。 } else { current = parseInt(getStyle(el)[property]); // 渐变值 } speed = (target - current) / 30; // 步长 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // Math.ceil向上取整 Math.floor向下取整 if (property === ‘opacity‘) { // 对opacity进行特殊处理 el.style.opacity = (current + speed) / 100 // 将前面先乘的除掉 } else { el.style[property] = current + speed + ‘px‘ } } }, 20) } el = document.getElementById(‘box1‘); //获取节点 animate(el, {‘opacity‘: 0,"left":200,‘width‘:500}) // 调用封装函数 </script> </body> </html>
标签：pac oct 索引 定时 || 问题 tco 变化 hidden
原文地址：https://www.cnblogs.com/binHome/p/11847854.html
