-
在用到obj.offsetWidth或者obj.offsetHeight的时候，如果，obj对象的样式有border等属性，则需要用getStyle()函数解决实际width和height值样式不兼容的问题 //获取style样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
1、dom.style.xxx 这种写法只能获取行内样式 例如 <div ></div> div.style.width能获取到是200px，但是没有出现在 引号中的样式是获取不到的 2、万能方法。 getComputedStyle(div,null).xxx 这个是标准方法，需要做一下兼容 currentStyle 是IE的 3、友情赠送获取任何样式的代码 function getStyle(obj,style){ if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }查看全部
-
多物体运动 for循环来为每一个TagNameList[i]添加事件 并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素 多物体不要共用一个值,在对象上定义一个单独的属性保持值 存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。查看全部
-
缓冲运动： 1、速度的定义： var speed=(目标值-当前值（offset）)/20； 2、取整函数： 向下取整：Math.floor(3.55);//3.55是取整的数值，结果为：3 向上取整：Math.ceil(3.35);//结果为：4 3、由于运算出现浮点数，而px无法显示小数值，所以需要取整 速度的取整判断： speed=speed>0?Math.ceil(speed):Math.floor(speed);// 条件操作位 这个表达式的意思是如果speed大于0（关系表达式返回true），则将Math.ceil(speed)向下去整赋值给 speed，反之则将Math.floor(speed)向上去整赋值给 speed查看全部
-
透明度运动 1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=100) 2、由于无法获取对象的透明度，所以可通过变量储存。（var alpha=初始值 alpha+=speed）查看全部
-
获取样式函数 当物体的样式加上border等类似的值时，这时offsetWidth这样的值就会出现bug了，所以这些类似offsetWidth的属性就不可以用了，可以定义一个获取的样式的函数用于获取样式的值，记得把获取到的值用parseInt（）这个函数取整。查看全部
-
多物体运动》用for循环让每个物体都遍历到》这样子函数就要传入两个参数》一个是this用来指代物体本身，还有目标》然后跟以前一样》设立计时器》判断目标值和实际值的关系确定速度的正负》最后赋值于物体的属性（发现有bug，由于计时器是共用的，快速划过几个物体时计时器会造成混乱，导致每个物体的计时器对应不正确，解决办法：在for循环的时候为每个物体设立自己的计时器，这样子就不会混乱。） 一句经验之谈：涉及多物体运动的变量等都不要共用，为每个物体建立属于自己的变量等，以免造成混乱。查看全部
-
匀速运动：<br><br> 1、设置定时器，每隔一段时间更改位置，达到匀速运动<br><br> 2、设置定时器前需清除定时器，以防多次触发重复生成多个定时器<br><br> 3、当运动位置达到目标值时，可通过清除定时器停止运动<br> 4、当定义函数多处相同时，可封装为一个函数，用不同参数调用，尽量少传递相同的参数 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的位置。查看全部
-
要物体做缓冲动画（就像火车离站点越近速度会越来越慢一样）》那就要让速度变量越来越慢》通过物体实际距离离目标会越来越小这点把这个距离作为变量除以一个系数》把所得的值赋给速度》这样就可以了（发现这样计算会有小数产生，但是浏览器会忽略掉小数，所有到最后会有bug回不到原位》通过把计算后值向上或向下取整来解决掉这个bug》这种运动计算时要注意这点）查看全部
-
鼠标划过和划出改变透明度》跟上次一样定义一个函数来传入参数改变透明度》但是透明度没有一个直接的属性像offsetLeft可以直接引用》设立一个变量alpha来赋值》判断变量的值跟目标值的大小以决定speed的正负值》通过alpha+=speed计算出alpha的值后再把值赋给属性那边查看全部
-
window.onload=function(){ var share1=document.getElementById("share1"); share1.onmouseover=onMouseOver; } function onMouseOver(){ startMove("div1",100,3); share1.onmouseover=null; } function startMove(id,oLeft,fTime){ var timer=null; var div1=document.getElementById(id); var flag=null; clearInterval(timer); flag=3*(oLeft-div1.offsetLeft)/fTime/100; timer=setInterval(function(){ div1.style.left=div1.offsetLeft+flag+'px'; if(Math.abs(oLeft-div1.offsetLeft)<=Math.abs(flag)){ div1.style.left=oLeft+'px'; share1.onmouseover=onMouseOver; clearInterval(timer); } console.log(div1.offsetLeft); },30); }查看全部
-
要做动画让div划过出来，划过回去》改变他的left来实现》要一点一点来已保持动画效果》做个定时器隔一段时间执行一次》要设置速度和到达目标就停止，防止不断运动下去》两个架构差不多的出来和回去函数要精简成一个》把不同的换为参数进去就行了》精简成一个》再精简成只有一个参数查看全部
-
< script > window.onload = function() { var oDiv = document.getElementById('box'); oDiv.onmouseover = function() { startMove(0); } oDiv.onmouseout = function() { startMove( - 200); } } var timer = null; function startMove(iTarget) { clearInterval(timer); var oDiv = document.getElementById('box'); timer = setInterval(function() { var speed = 0; if (oDiv.offsetLeft > iTarget) { speed = -10; } else { speed = 10; } if (oDiv.offsetLeft == iTarget) { clearInterval(timer); } else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } }, 30) } /* function startMove1(){ setInterval(timer); var oDiv=document.getElementById('box'); timer=setInterval(function(){ if(oDiv.offsetLeft==-200){ clearInterval(timer); } else{ oDiv.style.left=oDiv.offsetLeft-10+'px'; }},30) } */ < /script>/查看全部
-
，，查看全部
-
你查看全部
举报
0/150
提交
取消