JS动画效果_技术笔记

林疏雪正是在下 2019-11-07

未实现运动效果，后续再次尝试验证

0赞 · 0采集
howevert 2019-04-05

getStyle,上面针对IE浏览器，下面针对火狐浏览器。获取css样式的值

截图
0赞 · 0采集
是个啰嗦的人 2018-10-05

currentStyle 针对IE浏览器。getComputedStyle 针对firefox浏览器

截图
0赞 · 0采集
ParseDark 2018-08-26

对于要使用JS操作CSS的值，注意其他样式是否会导致我们需要操作的CSS属性值的改变。
获取属性兼容性JS代码段：
function attr(obj, attr) {
      if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return obj.getComputedStyle(obj, false)[attr]
        }
    }

0赞 · 0采集
慕雪1027864 2018-07-29

其他方法发获取属性特别是增加很多了属性时用这个函数传入参数判断参数实现效果注意透明度是opacity是小数用parseInt不合适应该parseFloat 四舍五入 Math.round(opacity)

截图
0赞 · 0采集
慕粉2308425049 2018-07-17

function getStyle(obj,attr){//获取样式
    if(obj.currentStyle){
        return obj.currentStyle[attr];//currentStyle针对IE浏览器
    }
    else{
        return getComputedStyle(obj,false)[attr];//针对Firefox浏览器
    }
}
获取的时候：parseInt（getStyle（obj，‘width’））

0赞 · 0采集
qq_无情胜有情_0 2018-06-13

window.onload=function(){
var para=document.getElementsByTagName("li");
for(var i=0;i<para.length;i++){
para[i].timer=null;
para[i].onmouseover=function(){
startMove(this,500);
}
para[i].onmouseout=function(){
startMove(this,300);
}
}
function startMove(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var speed=(target-obj.offsetWidth)/20;
speed=speed>0?Math.ceil(speed):Math.floor(speed);

   if(obj.offsetWidth==target){
   clearInterval(obj.timer);

   }
else{
   obj.style.width=obj.offsetWidth+speed+"px";
}
   },30)

}

}

0赞 · 0采集

慕神7088389 2018-06-08

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>多物体运动</title>

        <style type="text/css">

            *{

                padding:0;

                margin:0;

            }

            ul,li{

                list-style: none;

            }

            ul li{

                width:200px;

                height:100px;
                line-height: 100px;

                background-color: chartreuse;

                margin-bottom:20px;
                opacity: 0.3;
                border: 2px solid #000;
                font-size: 18px;
                color: #000;

            }

        </style>
        <script type="text/javascript">
            window.onload=function(){
                var aLi=document.getElementsByTagName('li');

                for(var i=0;i<aLi.length;i++){
                    aLi[i].timer=null;
                    //width运动与opacity运动分开设定定时器
                    aLi[i].timerOpacity=null;
                    aLi[i].alpha=30;
                    aLi[i].onmouseover=function(){
                        startMove(this,400,100);
                    }
                    aLi[i].onmouseout=function(){
                        startMove(this,100,20);
                    }
                }
                
                // var timer=null;
                //设置共用定时器会导致多个目标争抢同一个定时器，导致每一个之前触发的物体运动无法结束，多物体运动不能设置共用变量，所以需要为每个li设置单独定时器
                function startMove(obj,iTarget,iOpacity){
                    clearInterval(obj.timer);
                    clearInterval(obj.timerOpacity);
                    obj.timer=setInterval(function(){
                        //这里不使用offsetWidth是因为它包含了边框等宽度，无法使元素本身的width达到目标值
                        var speed=(iTarget-parseInt(getStyle(obj,'width')))/8;
                        speed=speed>0?Math.ceil(speed):Math.floor(speed);
                        if(parseInt(getStyle(obj,'width'))==iTarget){
                            clearInterval(obj.timer);
                        }else{
                            //parseInt()取整数数字，去掉属性单位
                            obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';
                            obj.style.fontSize=parseInt(getStyle(obj,'fontSize'))+speed/10+'px';
                        }
                    },30)

                    function getStyle(obj,attr){
                        if(obj.currentStyle){
                            //针对IE获取元素某项css属性
                            return obj.currentStyle[attr];
                        }else{
                            //针对其他浏览器
                            return getComputedStyle(obj,false)[attr];
                        }
                    }

                    obj.timerOpacity=setInterval(function(){
                        // var oSpeed=(iOpacity-obj.style.opacity)/10;
                        //变速的值使得无法达成obj.alpha==iOpacity(小数存在)，先使用匀速
                        if(obj.alpha>iOpacity){
                            oSpeed=-10;
                        }else{
                            oSpeed=10;
                        }
                        if(obj.alpha==iOpacity){
                            clearInterval(obj.timerOpacity);
                        }else{
                            obj.alpha+=oSpeed;
                            obj.style.opacity=obj.alpha/100;
                        }
                    },30)
                }
            }
        </script>

    </head>

    <body>

        <ul>

            <li>ABC</li>

            <li>EFG</li>

            <li>123</li>

        </ul>

    </body>

</html>

1赞 · 0采集

这就尴尬了 2018-05-02

获取样式值封装函数
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr]
    }
}

0赞 · 0采集
慕丝4089693 2018-04-09

getStyle()

截图
1赞 · 0采集
半世烟云落 2018-04-03

1赞 · 0采集
GYNexus 2018-03-23

1、dom.style.xxx 这种写法只能获取行内样式例如 <div ></div> div.style.width能获取到是200px，但是没有出现在引号中的样式是获取不到的 2、万能方法。 getComputedStyle(div,null).xxx 这个是标准方法，需要做一下兼容 currentStyle 是IE的 3、友情赠送获取任何样式的代码 function getStyle(obj,style){//引用时style要带引号 if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }
设置width的style写在div里和写在文档开头的<style></style>里，获取的div元素的oDiv.style.width不一样（后者会把border padding等的宽度也加上）
parseInt（）是获取整数

1赞 · 0采集
Rolla 2018-03-06

获取样式 function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr];//IE浏览器 } else { return getComputedStyle(obj, false)[attr];//firefox浏览器 } }

0赞 · 0采集
白鹿max 2018-01-12

浏览器针对

截图
0赞 · 0采集
前端沙雕 2018-01-08

获取样式的函数getStyle,一个是IE，一个是火狐。

截图
0赞 · 0采集
CoderEnko 2018-01-02

获取样式： function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }

截图
0赞 · 0采集
钟浪奇 2017-12-25

获取样式

截图
0赞 · 0采集
前端薇薇 2017-12-17

js只能获取到行内样式，而无法获取到内部样式或外部样式。 obj.style.xxxx获取的是行内样式。获取内部或外部样式的方法： currentStyle 针对IE浏览器； getComputedStyle 针对firefox浏览器。

截图
0赞 · 0采集
木木嗷 2017-11-20

获取某个对象的属性，并根据不同的浏览器返回

截图
0赞 · 1采集
慕仙5237505 2017-11-01

字体变大，盒子越来越小

0赞 · 0采集
慕仙5237505 2017-11-01

获取样式

截图
0赞 · 0采集
慕仙5237505 2017-11-01

iv{ width:200px; height:200px; background:#f00; border:3px solid #ff0; } </style> <script type="text/javascript"> window.onload=function(){ // div=document.getElementById("div1"); // div.onmousemove=function(){ move(); // } } function move(){ setInterval(function(){ var div=document.getElementById("div1"); //div.style.width=div.offsetWidth-1+"px"; div.style.width = parseInt(getstyle(div,"width"))-1+"px"; div.style.fontSize=parseInt(getstyle(div,"fontSize"))+1+"px"; },30) } function getstyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } //huofu }

截图
0赞 · 0采集
qq_骑着蜗牛上高速_1 2017-10-24

parseInt()方法还有基模式，可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。

0赞 · 0采集
qq_骑着蜗牛上高速_1 2017-10-24

offsetWidth=width+border*2 当前宽等于div宽加上border两边的宽

0赞 · 0采集
梦雨曦 2017-09-22

currentStyle 与getComputedStyle

截图
0赞 · 0采集
王王王博 2017-09-09

1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。 clientWidth是对象看到的宽度（含padding，不含border） offsetWidth是指对象自身的宽度（含padding，含border） scrollWidth是对象实际内容的宽度（含padding，含border，含滚动条） JS中 obj.style.attr 只能获取行内样式要获取非行内样式要通过obj.currentStyle[attr]或者getComputedStyle(obj,false)[attr]方法获取可以封装为 function getStyle(obj,attr){ //currentStyle针对IE浏览器； if(obj.currentStyle){ return bj.currentStyle[attr]; }else{ //getComputedStyle 针对Firefox浏览器 return getComputedStyle(obj,false)[attr] } } obj.offsetWidth 返回值是数值所以不用parseInt（）；而obj.style.width获取的是像素值（当给div增加边框值时，且宽度在内联样式里设置，js中obj.offsetWidth返回值中包括有边框，所以会导致js程序中数值的判断有误。当把宽度设置到行内样式时，上述的现象则没有。）

1赞 · 2采集
慕粉2333169640 2017-08-20

不同浏览器兼容

截图
0赞 · 0采集
qq_与陌Dance_0 2017-08-17

1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。 clientWidth是对象看到的宽度（含padding，不含border） offsetWidth是指对象自身的宽度（含padding，含border） scrollWidth是对象实际内容的宽度（含padding，含border，含滚动条） JS中 obj.style.attr 只能获取行内样式要获取非行内样式要通过obj.currentStyle[attr]或者getComputedStyle(obj,false)[attr]方法获取可以封装为 function getStyle(obj,attr){ //currentStyle针对IE浏览器； if(obj.currentStyle){ return bj.currentStyle[attr]; }else{ //getComputedStyle 针对Firefox浏览器 return getComputedStyle(obj,false)[attr] } } obj.offsetWidth 返回值是数值所以不用parseInt（）；而obj.style.width获取的是像素值（当给div增加边框值时，且宽度在内联样式里设置，js中obj.offsetWidth返回值中包括有边框，所以会导致js程序中数值的判断有误。当把宽度设置到行内样式时，上述的现象则没有。）

0赞 · 1采集
慕斯6506489 2017-08-03

parseFloat() 解析一个字符串并返回一个浮点数。 parseInt() 解析一个字符串并返回一个整数。 var iNum1 = parseInt("12345red"); //返回 12345

0赞 · 0采集
WL五楼 2017-08-01

parseFloat() 解析一个字符串并返回一个浮点数。 parseInt() 解析一个字符串并返回一个整数。 var iNum1 = parseInt("12345red"); //返回 12345 var iNum1 = parseInt("0xA"); //返回 10 var iNum1 = parseInt("56.9"); //返回 56 var iNum1 = parseInt("red"); //返回 NaN var fNum1 = parseFloat("12345red"); //返回 12345 var fNum2 = parseFloat("0xA"); //返回 NaN var fNum3 = parseFloat("11.2"); //返回 11.2 var fNum4 = parseFloat("11.22.33"); //返回 11.22 var fNum5 = parseFloat("0102"); //返回 102 var fNum1 = parseFloat("red"); //返回 NaN

0赞 · 0采集

数据加载中...