-
获取不同浏览器样式查看全部
-
看完最后一节课感觉没必要学js啊，直接学jquery不是方便多了吗？查看全部
-
可以在中间设置一下top值，让它固定在一个位置，再改变top值查看全部
-
获取样式查看全部
-
因为startMove()是函数，而不是DOM的方法， 除非你在那个startMove的js代码块的头部加上 Object.prototype.startMove=startMove; 然后你才能写： Li1.onmouseout = function(){this.startMove(this,'opacity',30)} 当然，要是这样的话，也不用传入obj了，直接把startMove()函数块里面的obj统统换成this，去掉函数定义里面的这个残烛，函数就写成这样了： 定义 function startMove(attr,iTarget,fn){…} 调用 Li1.onmouseout = function(){this.startMove('opacity',30)} 你看，跟jquery是一模一样吧。 jquery的$()本身就是一个函数对象，它早就给$()这个函数对象添加过animate()方法了。 链式运动：结束一个运动的时候，去直接另一个运动 回调函数查看全部
-
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]; } }查看全部
-
1、获取当前透明度不用parseInt<br> 2、设置透明度要考虑兼容<br> obj.style.filter='alpha(opacity:'+(当前透明度+变化速度)+')';<br> obj.style.opacity=(当前透明度+变化速度)/100;<br>针对chrome和火狐浏览器 3、透明度不加“px”<br> 在使用parseInt()时处理透明度小数时,会有影响 单位设置<br> 相应位置进行判断 IE/FireFox<br> 取相应值 Math.round()四舍五入取整数值<br> Math.round(parseFloat(getStyle(obj,attr))*100)查看全部
-
function starMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var icur=0; //用if判断属性 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))); //由于opacity的值是小数，需要用parseFloat转为小数值，Math.round四舍五入 }else{ icur=parseInt(getStyle(obj,attr)); } var speed=(iTarget-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer); }else{ if (attr=='opacity') { obj.style.filter='alpha(opacity:'+icur+speed+')'; obj.style.opacity=(icur+speed)/10; }else{ obj.style[attr]=icur+speed+'px'; } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,null)[attr]; } } </script>查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>下拉菜单</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } ul li{ width: 200px; height: 100px; background: yellow; margin-bottom: 20px; border: 1px solid #000; filter: alpha(opacity:30); opacity: 0.3; } </style> <script type="text/javascript">查看全部
-
window.onload=function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmouseover=function(){ startMove(Li1,'height',400); } Li1.onmouseout=function(){ startMove(Li1,'height',200); } Li2.onmouseover=function(){ startMove(Li2,'width',400); } Li2.onmouseout=function(){ startMove(Li2,'width',200); } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=parseInt(getStyle(obj,attr)); var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }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]; } }查看全部
-
有border/padding属性的div运动时不能用offsetX属性获取div的X,因为offsetX获取的是div盒子的属性 不是conten的属性！ 在用到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]; } } obj.style.width 也可以写作：obj.style['width']查看全部
-
currentStyle 针对IE getComputedStyle 针对firefox浏览器查看全部
-
oDiv.style.width=parseInt(getStyle(oDiv,"width"))-2+"px"; oDiv.style.fontSize=parseInt(getStyle(oDiv,"fontSize"))+1+"px"; function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; //IE }else{ return getComputedStyle(obj,false)[attr]; //Firefox } }查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取样式</title> <style type="text/css"> #div1{ height: 200px; background: #f00; border:4px solid #0000FF } </style> </head> <body> <div id="div1" ></div> </body> <script type="text/javascript"> window.onload=function(){ startMove(); } function startMove(){ setInterval(function(){ var div1=document.getElementById("div1"); //div1.style.width=div1.offsetWidth-1+"px"; //div1.style.width=parseInt(div1.style.width)-1+"px"; div1.style.width=parseInt(getStyle(div1,"width"))-1+"px"; },30); } //一封装好的函数。可以改变宽度，高度，字号。。。的大小。获取样式的封装函数 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//针对ie浏览器。 }else{ return getComputedStyle(obj,false)[attr];//针对firefox浏览器。 } } </script> </html> <!-- -->查看全部
-
div.offsetWidth获得的是width+border+padding的值 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]; } } 1、offsetWidth返回的是oDrag的padding+border+width值之和； 2、style.width返回的行内样式，但是返回的是字符串，所以用parseInt转换为数值；这里注意为什么之前用offsetWidth而不用style.width来获取宽度的原因； 3、为了实现样式和结构分离，减少行内元素，可以封装getStyle函数来获取css里面定义的样式属性。查看全部
举报
0/150
提交
取消