-
在编程时直接用getStyle查看全部
-
var timer = null; function startMove(iTarget) { clearInterval(timer); timer = setInterval(function(){ var speed = 0; var oDiv = document.getElementById("oDiv"); speed = (iTarget-oDiv.offsetLeft)/10; speed = speed>0?Math.ceil(speed):Math.floor(speed); if (oDiv.offsetLeft!=iTarget){ oDiv.style.left = oDiv.offsetLeft + speed +"px"; } },30) } window.onload = function() { var oDiv = document.getElementById("oDiv"); oDiv.onmouseover = function() { startMove(0); } oDiv.onmouseout = function () { startMove(-200); } }查看全部
-
<div class="oDiv" id="oDiv"> <div class="inner"></div> </div> <script type="text/javascript"> var timer = null; function startMove(iTarget) { clearInterval(timer); timer = setInterval(function(){ var speed = 0; var oDiv = document.getElementById("oDiv"); if(oDiv.offsetLeft < iTarget) { speed = 10; }else { speed = -10; } if (oDiv.offsetLeft!=iTarget){ oDiv.style.left = oDiv.offsetLeft + speed +"px"; } },30) } window.onload = function() { var oDiv = document.getElementById("oDiv"); oDiv.onmouseover = function() { startMove(0); } oDiv.onmouseout = function () { startMove(-200); } }查看全部
-
function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
用封装好的getStyle函数来获取样式，并用parseInt方法进行解析（主流，常用方法） function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; // currentStyle针对IE浏览器 }else{ return getComputedStyle(obj,flase)[attr]; //getComputedStyle针对firefox浏览器 } }查看全部
-
解决方法： 简单的样式和数量少时，可以在div中定义行内样式，并用parseInt()函数进行解析字符串后，可以获取样式解决问题。（简陋粗俗）查看全部
-
在运动的物体上加边框后会改变原应该有的运动效果。 就需要获取样式。查看全部
-
多物体运动，所有的变量，参数等都不能公用。查看全部
-
//最终封装的'完美移动框架' function startMove(obj,json,fn){ clearInterval(obj.timer); var flag;//标志所有运动是否到达目标值 obj.timer=setInterval(function(){ flag=true; //进入定时器时,现将flag设置为所有的属性都已达到目标值 for(var attr in json){ //取属性值 var curr=0; //判断是否为透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } //移动速度处理 var speed=0; speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[attr]){ flag=false; //假设有三个json的key/value值,这三个值中只要有一个没有达到目标值,flag就等于false. } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fn(); } } },30); }查看全部
-
透明度运动 1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=100) 2、由于无法获取对象的透明度，所以可通过变量储存。（var alpha=初始值 alpha+=speed） window.onload=function(){ var oDiv2=document.getElementById('div2'); oDiv2.onmouseover=function(){ change(30); }; oDiv2.onmouseout=function(){ change(100); }; }; //透明度运动 var timer2=null, alpha=100; function change(iTarget){ var oDiv2=document.getElementById('div2'); clearInterval(timer2); timer2=setInterval(function(){ if(alpha==iTarget){ clearInterval(timer2); }else{ if (alpha>iTarget) { alpha+=-10; }else{ alpha+=10; } oDiv2.style.opacity=alpha/100; oDiv2.style.filter=':alpha(opacity:'+alpha+')'; } },30); }查看全部
-
Div透明度的使用 filter:alpha(opacity:0.3); opacity:0.3;查看全部
-
JS动画效果： 运动框架实现思路： 1.速度（改变值left,right,width,height,opacity) 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动查看全部
-
你获取对象名为oDiv 对象名加上.style意思是是获取某个属性，但这里的.style只能够获取行内对象，也就是在html里面写的样式。head里面的获取不到。因为你写了<div id="div1" >所以oDiv.style.width一开始获取到的是200px oDiv.style.width一开始是等于200px的 parseInt(oDiv.style.width)-1+'px'这部分呢，这里注意，oDiv.style.width。这里获取的是一个字符串，字符串-1的话，你没办法得到数字，所以要把字符串转换成数字，这里用到了parseInt方法，是把字符串转换成数字。 所以宽度从200不断减1.查看全部
-
parseInt是获取整数，而后面的oDiv.style.width是获取的在body下面标签里的格式，之前用oDiv.offsetLeft是直接获取style里的值，但是在style里如果给oDiv加上了边框，那么offsetLeft就不能准确获取left的值了，而是获取left+边框的值，这里的oDiv.style.width不会有这个问题，但是还是很麻烦，因此后来又封装了一个函数，也就是getStyle()函数 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } 然后就可以直接调用parseInt(getStyle(oDiv,"width"))来替换原来的oDiv.offsetWidth查看全部
-
i标签本身是用来显示斜体文本(italic)，但现在普遍被用来显示图标(icon)查看全部
举报
0/150
提交
取消