首页 > 代码库 > js笔记---（运动）通用的move方法，兼容透明度变化
js笔记---（运动）通用的move方法，兼容透明度变化
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> /*#div1{ height:100px; width:100px; position:absolute; --left:800px; margin-top:90px; background-color:red;} span { height:300px; width:1px; position:absolute; left:500px; background-color:black; }*/ div { height:100px; width:100px; margin-top:50px; background-color:red; } </style> <script type="text/javascript"> window.onload = function () { //var oBtn = document.getElementById(‘btn1‘); //oBtn.onclick = function () { // starMove(400); //} var oDiv = document.getElementsByTagName(‘div‘); //var i = 0; //for (i = 0; i < oDiv.length; i++) { //} oDiv[0].onmouseover = function () { starMove(this, ‘width‘, 300); } oDiv[0].onmouseout = function () { starMove(this, ‘width‘, 100); } oDiv[1].onmouseover = function () { starMove(this, ‘height‘, 300); } oDiv[1].onmouseout = function () { starMove(this, ‘height‘, 100); } oDiv[2].onmouseover = function () { starMove(this, ‘opacity‘, 30); } oDiv[2].onmouseout = function () { starMove(this, ‘opacity‘, 100); } } window.onscroll = function () { var scroTop = document.documentElement.scrollHeight || document.body.scrollTop; } //获取样式数值 function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } var iSpeed=0; function starMove(obj,attr,iTarget) { clearInterval(obj.timer); var iCur = 0; obj.timer = setInterval(function () { //parseInt(parseFloat(getStyle(obj, attr)) * 100)中 parseFloat(getStyle(obj, attr)为取带小数的opacity值 //parseInt(...) 目的为 解决计算机小数问题bug 防止3.0000000000001=3 类似问题 iCur = attr == "opacity" ? parseInt(parseFloat(getStyle(obj, attr)) * 100) : parseInt(getStyle(obj, attr)); //iCur = parseInt(getStyle(obj, attr)); iSpeed =(iTarget - iCur) / 8; iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iCur == iTarget) { clearInterval(obj.timer); } else { if (attr == "opacity") { obj.style.filter = ‘alpha(opacity=‘ + (iCur + iSpeed) + ‘)‘; obj.style.opacity = (iCur + iSpeed) / 100; } else { obj.style[attr] = iCur + iSpeed + ‘px‘; } } }, 30); } </script></head><body> <!--<input type="button" id="btn1" value="http://www.mamicode.com/开始" /><br /> <div id="div1"></div> <span></span>--> <div></div> <div></div> <div></div></body></html>
js笔记---（运动）通用的move方法，兼容透明度变化
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。