-
<!-- 使用js实现透明度运动而不采用直接设置css的style.opacity属性来改变透明度,这是因为css的透明度的设置是一步到位，瞬时完成的，而使用js可以实现渐隐特效 --> opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。. 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity属性值是0~1*/ 【没有直接的属性可以改变透明度，需要定义一个alpha】查看全部
-
凡是遇到这种运动涉及到数字的问题都要做一个判断，向上或者向下取整查看全部
-
把speed=speed>0?Math.ceil(speed):Math.floor(speed);改为if格式必须是这样才行：if(speed>0){ var spe=Math.ceil(speed); } else{ var spe=Math.floor(speed); } if(menu.offsetLeft==tangel){ clearInterval(timer); } else{ menu.style.left=menu.offsetLeft+spe+'px'; } },30) } 否则仅仅if(speed>0){speed=Math.ceil(speed)};else{Math.floor(speed)}这样是改不了左右运动离目的地有空隙的bug */查看全部
-
转hm5007：其实问题很简单 不知楼下众位说得辣么复杂干嘛子 也就是老师写的flag变量相对于定时器的回调函数是全局变量，而回调函数会把全局变量flag赋值成false，辣么纵观整个作用域没有一个是把flag赋值成true的，也就是不可能会执行到清除timer和执行链式的最后一个参数fn，所以，得把flag设为true放在定时器回调里成为局部变量，把检测停止函数放在for in外接着后面，而回调里会把flag设为false，每次回调执行完就会把flag销毁，这样flag就不会一直是false从而进不了清除timer和执行fn的函数查看全部
-
多物体运动争抢资源问题 如果设置了一个公用的资源，多物体事件会争抢，如设置了一个公共定时器，都触发了就会抢夺，产生混乱，所以最好为每个物体设置定时器后者设置初始透明度 aLi[i].timer = null;aLi[i].alpha = 30;等等查看全部
-
【前面学的offsetLeft之类的都应该改用getStyle】 在上一节的多个物体宽度变化的时候，如果给矩形添加一个外边框 border:4px solid #000 会发现，变宽之后的宽为392px，变回来之后是256px，与预期的400px和200px不符 原因：用oDiv.offsetWidth获取到的是包括边框在内的宽度 【解决方法1】把原来的样式#div1{width:200px;....}中的width去掉， 写在行间<div id="div1" > 所以，使用的时候:oDiv.style.width = oDiv.offsetWidth-1+"px"; 改成oDiv.style.width = parseInt(oDiv.style.width)-1+"px"; 【解决方法2】如果不想写在行内，也可以保留#div1{width:200px;....}采用函数： function getStyle(obj,attr){ if(obj.currentStyle){//IE浏览器 return obj.currentStyle[attr]; }else{//firefox浏览器 return getComputedStyle(obj,false)[attr]; } } 所以oDiv.style.width = parseInt(getStyle(oDiv,"width"))-1+"px"; PS:这个函数除了可以改变宽度之外，还可以改变font-size等查看全部
-
当鼠标移动的时候会出现多次执行涵数，只要鼠标小小的动一下就会执行动画。只要把onmouseover 改成onmouseenter就可以了。这样BUG就都解决了查看全部
-
由于数值设置的原因，div移动到一定px后，进行相减再除20的运算后会出现小数，比如0.75，比如这时div移动到了290，程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,而浏览器是不允许出现小数的，会把0.75去掉，那么div的left就成了290，下次执行时div的left是290，算出来速度还是0.75，浏览器又省略了小数，结果就是div停在了290px，到不了目标点300。查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>js速度动画</title> <style> div,body,span{ margin:0; } #more{ width:200px; height:200px; position:relative; left:-200px; background:olive; } #more span{ width: 20px; height: 50px; background-color: red; position: absolute; top: 75px; left: 200px; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('more'); oDiv.onmouseover=function(){ startMove(10,0); } oDiv.onmouseout=function(){ startMove(-10,-200); } } var timer=null; function startMove(speed,target){ clearInterval(timer); var oDiv=document.getElementById('more'); timer=setInterval(function(){ if(oDiv.offsetLeft==target){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); } </script> </head> <body> <div id="more"> <span id="share">分享</span> </div> </body> </html>查看全部
-
http://blog.csdn.net/u014035151/article/details/52119598 全课程代码加理解，注释。 完整代码 https://yunpan.cn/c66VPJfmcbZDN 访问密码 e163查看全部
-
offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距 如果父div的position定义为relative,子div的position定义为absolute，那么子div的style.left的值是相对于父div的值， 这同offsetLeft是相同的，区别在于： 1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算， 还用offsetLeft比较方便。 2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。 3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在css里，style.left的值仍然 为空，这就是我刚开始碰到的问题，总是取不到style.left的值。 offsetLeft则仍然能够取到，无需事先定义div的位置查看全部
-
Ps1：opacity：所有浏览器都支持 opacity 属性。 注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。 Ps2：缓冲运动的速度值一定要转换成整数，不然将到达不了终点，是用Math.ceil(),还是Math.floor(),要看就提情况。 Ps3：动画大致模版（思路）： <script type="text/javascript"> var timer=null; function startMove (iTarget) { clearInterval(timer); var obj=document.getElementById('obj'); timer=setInterval(function () { var speed=0; if(obj.属性>iTarget){ spped=-num; } else{ speed=num; } if(obj.属性==iTarget){ clearInterval(timer); } else{ obj...=obj.属性+speed... } }, 毫秒) } </script> 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
运动框架实现思路查看全部
-
封装好的函数getStyle() 常用于改变元素的样式查看全部
-
function startMove(obj,attr,iTarget,fn){ //添加一个回调函数fn clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur==iTarget){ clearInterval(obj.timer); if(fn){ //判断是否存在回调函数,并调用 fn(); } }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
举报
0/150
提交
取消