1、sports.js代码
function sport(obj,json,fn){ //1.先停止上一次的计时器 clearInterval(obj.timer); //2.开启新的计时器 obj.timer = setInterval(()=>{ //1.设置开关 let stop = true; //2.遍历json for(let attr in json){ //1.获取当前值 let cur = attr === 'opacity' ? parseInt(parseFloat(getStyle(obj,attr) )* 100) : parseInt(getStyle(obj,attr)); //2.计算速度 let speed = (json[attr] - cur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //3.判断是否结束 if(cur !== json[attr]){ stop = false; } //4.设置运动 if(attr === 'opacity'){ obj.style.opacity = (cur + speed) / 100; obj.style.filter = "alpha(opacity=" + (cur + speed) + ")"; }else{ obj.style[attr] = cur + speed + 'px'; } } if(stop){ clearInterval(obj.timer); if(typeof fn === 'function'){ fn(); } } },30) }
//获取非行内样式(兼容) function getStyle(obj,attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,1)[attr]; }
2.1、多物体运动(非链式)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> body{ height: 5000px; } div{ width: 100px; height: 100px; background: red; border: 2px solid black; opacity: 1; filter: alpha(opacity=100); } </style> </head> <body> <div></div> <script src="sport.js"></script> <script type="text/javascript"> const oDiv = document.querySelectorAll('div')[0]; oDiv.onmouseenter = function(){ sport(this,{width : 400,height:400,opacity:30}); } oDiv.onmouseleave = function(){ sport(this,{width : 100,height : 100,opacity : 100}); } </script> </body> </html>
2.2、多物体运动(链式)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; background: red; opacity: 1; filter: alpha(opacity=100); } </style> </head> <body> <div id="box"> </div> <script src="sport.js"></script> <script type="text/javascript"> let oDiv = document.getElementById("box");
//箭头函数 oDiv.onmouseenter = function(){ sport(this,{width : 300},()=>{ sport(this,{height : 300},()=>{ sport(this,{opacity : 30}) }) }); }
//bind oDiv.onmouseleave = function(){ sport(this,{opacity : 100},function(){ sport(this,{height : 100},function(){ sport(this,{width : 100},"hehe") }.bind(this)) }.bind(this)) } </script> </body> </html>