js中的运动-创新互联
1 简单运动(匀速)
创新互联建站基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽,联通大带宽,移动大带宽,多线BGP大带宽租用,是为众多客户提供专业四川电信科技城机房报价,主机托管价格性价比高,为金融证券行业服务器托管,ai人工智能服务器托管提供bgp线路100M独享,G口带宽及机柜租用的专业成都idc公司。box{ width: 100px; height: 100px; background-color: #ccc; position: absolute; top:200px; left: 0; }
2 指定运动的距离(匀速)
js代码:
3 缓冲运动(速度由快到慢,直至停止)
缓冲运动的原理: 速度由距离决定。即: 距离越大速度越大,距离越近,速度越小,直至为0.
4 加速运动(速度由慢到快,直至到达终点)
加速运动和缓冲运动相反,代码也不需要做过多的修改
原理:根据移动的距离来设置速度,也就是正比关系
var obtn = document.querySelector('button'); var obox = document.querySelector('.box'); var totalDistance = 500; // 设置速度 var speed = null; obtn.onclick = function() { // 1 先清除掉定时器 clearInterval(obox.timer); obox.timer = setInterval(function() { // 1 获取当前运动的距离 var curPosition = getStyle(obox,'left'); // 2 speed是变化的 动态计算 speed = (curPosition / 10)||1; // 对speed进行取整操作 // ceil:向上取整 // floor: 向下取整 // 3 *需要对speed进行取整 否则达不到临界值 speed = speed > 0? Math.ceil(speed):Math.floor(speed); obox.style.left = obox.offsetLeft + speed + 'px'; console.log(speed); if(getStyle(obox,'left') >= totalDistance){ console.log('我执行了没'); obox.style.left = totalDistance + 'px'; clearInterval(obox.timer); } }, 30); } // 封装获取样式的方法 不带px单位的 function getStyle(ele, style) { let result = ele.currentStyle ? ele.currentStyle[style] : getComputedStyle(ele, null)[style]; return parseInt(result); }
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站栏目:js中的运动-创新互联
URL地址:http://ybzwz.com/article/dpeohd.html