JS动画效果_学习笔记

首页免费课 JS动画效果笔记

JS动画效果

最热最新

慕粉0815224883

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> p标签</title>
    <style type='text/css'>

        *{
            margin:0px;
            padding:0px;
        }
        li{
            width:200px;
            height:100px;
            margin:20px;
            list-style:none;
            background-color:yellow;
            opacity: 0.3;
            filter: alpha(opacity:30);
        }
    </style>
    <script type='text/javascript'>
        window.onload=function(){
            var Li1=document.getElementById('li1');
            var Li2=document.getElementById('li2');
            Li1.onmouseover=function(){
                startMove(this,'opacity',100);
            }
            Li1.onmouseout=function(){
                startMove(this,'opacity',30);
            }
            Li2.onmouseover=function(){
                startMove(this,'height',400);
            }

            Li2.onmouseout=function(){
                startMove(this,'height',100);
            }
        }

        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{

                return getComputedStyle(obj,false)[attr];

            }

        }

        function startMove(obj,attr,target){

            clearInterval(obj.timer);

            obj.timer=setInterval(function(){
                var icur=null;
                if(attr=='opacity'){
                    icur = Math.round(parseFloat(getStyle(obj,attr))*100);
                }
                else{
                    icur=parseInt(getStyle(obj,attr));
                }
                var speed=(target-icur)/8;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(icur==target){
                    clearInterval(obj.timer);
                }

                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)
        }
    </script>
</head>
<body>
<ul>
    <li id='li1'></li>
    <li id='li2'></li>
</ul>
</body>
</html>

查看全部

0 采集收起来源：任意属性值（二）

2019-04-01

Sandaydi

move.js 框架

function getStyle(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj, false)[attr];
    }
}
function startMove(obj, attr, iTarget, fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        //1、取当前的值
        var icur = 0;
        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)
}

JavaScript

鼠标移入先变宽，再变高，然后变透明度

鼠标移出先变透明度，再变高，最后变宽

window.onload = function(){
    var Li = document.getElementById('li1');
    Li.onmouseover = function(){
        startMove(Li, 'width', 400, function(){
            startMove(Li, 'height', 200, function(){
                startMove(Li, 'opacity', 100);
            });
        });
    }
    Li.onmouseout = function(){
        startMove(Li, 'opacity', 30, function(){
            startMove(Li, 'height', 100, function(){
                startMove(Li, 'width', 200);
            });
        });
    }
}

查看全部

1 采集收起来源：JS链式动画

2019-03-16

Sandaydi 03:28

运动框架实现思路

查看全部

0 采集收起来源：JS动画效果课程介绍
2019-03-12
weixin_慕函数6093326 00:48

fliter标签

查看全部

0 采集收起来源：JS透明度动画
2019-01-17
weixin_慕函数6093326 01:32

fliter标签

查看全部

0 采集收起来源：JS透明度动画
2019-01-17
慕圣6698645

阿里巴巴矢量图标库
www.iconfont.cn

查看全部

1 采集收起来源：jQuery动画案例
2019-01-11
慕粉0815224883

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]; } }

查看全部

2 采集收起来源：JS链式动画
2019-01-04
慕粉0815224883

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p标签</title>
<style type='text/css'>
*{
margin:0px;
padding:0px;
}
li{
width:200px;
height:100px;
margin:20px;
list-style:none;
background-color:yellow;
}
</style>
<script type='text/javascript'>
window.onload=function(){
var Li1=document.getElementById('li1');
var Li2=document.getElementById('li2');
Li1.onmouseover=function(){
startMove(this,'width',400);
}
Li1.onmouseout=function(){
startMove(this,'width',200);
}
Li2.onmouseover=function(){
startMove(this,'height',400);
}
Li2.onmouseout=function(){
startMove(this,'height',100);
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,target){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var icur=parseInt(getStyle(obj,attr));
var speed=(target-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(icur==target){
clearInterval(obj.timer);
}
else{
obj.style[attr]=icur+speed+'px';
}
},30)
}
</script>
</head>
<body>
<ul>
<li id='li1'></li>
<li id='li2'></li>
</ul>
</body>
</html>

查看全部

0 采集收起来源：任意属性值（一）
2019-01-04

花花世界11

window.onload = function(){
var Li1 = document.getElementById('li1');
Li1.timer = null; // 为 需要运动的对象添加一个计时器
// var Li2 = document.getElementById('li2');
// var Li3 = document.getElementById('li3');
// alert(Math.round(0.3000009));
Li1.onmouseover = function(){
StartMove(this, 'opacity', 100);
};
Li1.onmouseout = function(){
StartMove(this, 'opacity', 30);
};
};
// var timer = null; 多物体运动时不要使用公用值
// var alpha = 30;
function StartMove(obj, attr, Target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var attr_cur = 0; // 需要改变的属性的当前值
if (attr === 'opacity'){
attr_cur = parseFloat(getStyle(obj, attr)) * 100;
} else {
attr_cur = parseInt(getStyle(obj, attr));
}
var speed = (Target - attr_cur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (attr_cur === Target){
clearInterval(obj.timer);
} else if (attr === 'opacity'){
obj.style[attr] = (attr_cur + speed)/100;
obj.style.filter = 'Alpha(opacity = '+ (attr_cur + speed) +')';
} else {
obj.style[attr] = attr_cur + speed + 'px';
}
},30);
};
function getStyle(obj, attr){
if (obj.currentStyle){
return obj.currentStyle[attr];
} else {
return window.getComputedStyle(obj, false)[attr];
}
}

我用的Html5 没有遇到透明度小数不精确的现象，我通过输出观察发现透明度确实有不精确的现象，但是经过下一次变化后小数就会被清除掉。

查看全部

2 采集收起来源：任意属性值（二）

2018-12-03

慕函数6103035

offsetLeft会越来越大，与目标差值越来越下，speed越来越小。

查看全部

0 采集收起来源：JS缓冲动画
2018-11-09
慕函数6103035

用offsetLeft是因为left可读写，且offset返回的是数值，left返回的是字符串

查看全部

0 采集收起来源：JS速度动画
2018-11-09
阿君 11:43

2、只要是多物体运动所有的东西都不能共用。记住！！！

查看全部

0 采集收起来源：JS多物体动画
2018-10-30
阿君 00:28

1、对这节课取个好理解的名字，多个物体设置相同动画，如何实现。

查看全部

0 采集收起来源：JS多物体动画
2018-10-30
阿君

1、对这节课取个好理解的名字，多个物体设置相同动画，如何实现。

查看全部

1 采集收起来源：同时运动
2018-10-30
阿君 00:14

老师这个例子很好。用剩余路程的改变来作为变化速度的改变。很好的解法。学习了，将来类似的情况就用这个解法。

查看全部

0 采集收起来源：JS缓冲动画
2018-10-30

首页上一页 1 2 3 4 5 6 7 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.您至少已经具备JavaSript的知识。2.您已经具备一些开发经验。

老师告诉你能学到什么？: 1.使用定时器实现简单动画。2.如何一步步封装库。2.培养编程的思想。

微信扫码，参与3人拼团

热搜

最近搜索清空

JS动画效果