-
gnfc查看全部
-
currentStyle 针对IE getComputedStyle 针对firefox查看全部
-
JS动画效果 一 运动框架实现思路 1 将运动封装成一个运动框架，便于以后的使用 2 速度的改变（匀速） @改变值left，right，width，height，opacity 3 缓冲运动（速度可变） 4 多物体运动 5 任意值运动变化 6 链式运动 7 同时运动查看全部
-
多物体运动 for循环来为每一个TagNameList[i]添加事件 并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素 多物体不要共用一个值,在对象上定义一个单独的属性保持值 存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 给每一个li设置一个timer，才不会致使他们去抢timer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };查看全部
-
缓冲运动： 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） <html> <head> <style type="text/css"> * { margin:0; padding:0; } #div1 { width:200px; height:200px; background:#08b;; filter:alpha(opacity:30); opacity:0.3; } </style> <script> window.onload=function(){ var odiv=document.getElementById("div1"); odiv.onmouseover=function(){ startMove(100); } odiv.onmouseout=function(){ startMove(30); } } var timer=null; var alpha=30; function startMove(target){ var odiv=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>target){ speed=-10; }else{ speed=10; } if(alpha==target){ clearInterval(timer); }else{ alpha+=speed; odiv.style.filter='alpha(opacity:'+alpha+')'; odiv.style.opacity=alpha/100; } },30); }查看全部
-
移动动画可以分解为3个动作： 1、鼠标移入后运动 onmouseover鼠标移入事件 setInterval设置运动函数 2、到达位置后停止 if..else...判断 3、阻止重复加载 clearInterval查看全部
-
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的位置查看全部
-
JS动画效果 一 运动框架实现思路 1 将运动封装成一个运动框架，便于以后的使用 2 速度的改变（匀速） @改变值left，right，width，height，opacity 3 缓冲运动（速度可变） 4 多物体运动 5 任意值运动变化 6 链式运动 7 同时运动查看全部
-
style.Width只能从html中的行内样式获得，而offsetWidth则没有限制，要从非行内样式获取此图为方法。查看全部
-
width是元素实际内容的宽度，不包括内边距和边框，而offsetWidth是width和内边距边框之和，因此将offsetWidth值改变后赋给Width后，Width并没有包含边框的值，实际网页显示的值是Width和边框值之和。查看全部
-
移动动画可以分解为3个动作： 1、鼠标移入后运动 onmouseover鼠标移入事件 setInterval设置运动函数 2、到达位置后停止 if..else...判断 3、阻止重复加载 clearInterval查看全部
-
速度动画 1 定时器和左边距离实现一个物体块的运动 <script> window.onload = function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(); //鼠标滑过开始移动 } oDiv。onmouseout = function（）{ startMove1（）； } function startMove（）{ //解决时间加速 clearInterval（timer）； timer = setInterval（function（）{ if(oDiv.offsetLeft = = 0){ //使其停止 // = = -200 clearInterval(timer) } else{ oDiv.style.left = oDiv.offsetLeft+10+'px'; //不断触发定时器形成时间累加 //-10 }，30） } //鼠标移出事件 两个代码相似，可将函数代参数，将不同的值传入 尽量减少参数的传入利用参数以及if判断实现查看全部
-
JS动画效果 一 运动框架实现思路 1 将运动封装成一个运动框架，便于以后的使用 2 速度的改变（匀速） @改变值left，right，width，height，opacity 3 缓冲运动（速度可变） 4 多物体运动 5 任意值运动变化 6 链式运动 7 同时运动查看全部
-
http://blog.csdn.net/u014035151/article/details/52119598 全课程代码加理解，注释。 完整代码 https://yunpan.cn/c66VPJfmcbZDN 访问密码 e163查看全部
举报
0/150
提交
取消