-
offsetWidth会计算元素本身宽度加上边框宽度。在需要读取元素宽度的函数中会有bug。可用getStyle自定函数来获取元素本身的属性的值。查看全部
-
多物体运动都不能使用公用参数值，应该为每一个物体都各自定义一个参数值。例如time可改成a[i].timer查看全部
-
透明度动画 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); } </script> </head> <body> <div id="div1"> <img src="index/images/50.jpg"> </div> </body> </html>查看全部
-
速度动画 <script> window.onload = function() { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); } oDiv.onmouseout = function() { startMove(-200); } } var timer=null; function startMove(iTarget) { clearInterval(timer); var oDiv = document.getElementById('div1'); 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); } </script> <body> <div id="div1"> <span id="share">分享</span> </div> </body>查看全部
-
运动框架实现思路 1.速度（改变值left、right、width、height、opacity(透明度)） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动查看全部
-
currentStyle针对IE<br> getComputedStyle针对ff查看全部
-
多物体同时运动 传入json，然后遍历json，同时运动查看全部
-
json 轻量级数据交换格式查看全部
-
链式运动，如下图：查看全部
-
链式运动，执行完后加回调函数查看全部
-
行间样式： 1.过程：obj.stlye.width是样式中的块width；而obj.offsetWidth是显示的width(包括border之类的)，故obj.style.width=obj.offsetWidth-1=obj.style.width+borderWidth-1,当borderWidth＞1时,其实这是在加宽度而不是减宽度; 2.原型为parseInt ( Strings,[int radix])，用于解析一个字符串，并返回一个整数。还有parseFloat,则解析一个字符串，返回一个浮点数; 3.用js的style属性可以获得html标签的样式，但是不能获取非行间样式。即： 用document.getElementById(‘element').style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，为了实现结构样式分离，减少行内元素，可封装函数来获取CSS里定义的style。对于通过class属性引用的外部样式表，就拿不到我们要的信息了。所以js用currentStyle和getComputedStyle获取css的非行间样式； 4.offsetWidth返回的是oDiv的padding+border+width值之和； 获取样式方法： 1、dom.style.xxx 这种写法只能获取行内样式 例如 <div ></div> div.style.width能获取到是200px，但是没有出现在 引号中的样式是获取不到的 2、万能方法(为了获取样式而封装好的函数) getComputedStyle(obj,false)[attr] 这个是标准方法，需要做一下兼容 currentStyle 是IE的 3、友情赠送获取任何样式的代码 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
获取样式： function getStyle(obj.attribute){ if(obj.currentStyle){ return obj.currentStyle(attribute); //针对IE浏览器 }else{ return getComputedStyle(obj,false)[attribute]; //针对非IE浏览器 } }查看全部
-
1、obj.style.width 是获取元素的行内样式宽度， 2、obj.offsetWidth,是obj.style.width+borderwidth(边框宽度)+padding(内边距)； 获取行内样式方法： 1、IE浏览器 obj.currentStyle[attr]; 2、火狐浏览器 getComputedStyle(obj,false)[attr];查看全部
-
Math.round:数值四舍五入查看全部
-
获取样式： function getStyle(obj.attribute){ if(obj.currentStyle){ return obj.currentStyle(attribute); //针对IE浏览器 }else{ return getComputedStyle(obj,false)[attribute]; //针对非IE浏览器 } }查看全部
举报
0/150
提交
取消