JS动画效果_学习笔记

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

JS动画效果

最热最新

慕斯8597481

【多个物体的宽度变化】 var aLi = document.getElementsByTagName("li"); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover = function(){ startMove(this,400); } aLi[i].onmouseout = function(){ startMove(this,200); } } var timer = null; function startMove(obj,iTarget){ clearInterval(timer); timer = setInterval(function(){ var speed = (iTarget-obj.offsetWidth)/8; speed = speed>0 ? Math.ceil(speed) :Math.floor(speed); if(obj.offsetWidth == iTarget){ clearInterval(timer); }else{ obj.style.width = obj.offsetWidth + speed + "px"; } },30) } 【bug】如果鼠标移动得够快，会出现3个矩形同时变宽。原因：虽然每次一上来就clearInterval(timer)，但是这个定时器是公用的，所以3个li同时在争着使用定时器解决方法：给每一个li定义一个timer aLi[i].timer = null; 然后把需要timer的地方全部改成obj.timer

查看全部

4 采集收起来源：JS多物体动画
2018-03-22
jazia

链式动画，在startMove(obj,attr,iTarget,fn)再加一个fn参数，并在清除动画之后，加入fn方法：if(fn){fn();} 在主页中，在三个参数之后再加入一个参数 startMove(Li,'width',400,function(){ startMove(Li,'height',200,function(){ startMove(Li,'opacity',100); }) }) 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]; } }

查看全部

4 采集收起来源：JS链式动画
2018-03-22
黄枪枪

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

查看全部

3 采集收起来源：JS链式动画
2018-03-22

慕神7088389

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>淘宝jQ运动</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    #move {
        width: 240px;
        margin: 10px auto;
        background-color: #f5f4f4;
        border: 1px solid #ccc;
        overflow: hidden;
    }

    #move a {
        float: left;
        display: inline-block;
        width: 58px;
        height: 25px;
        border: 1px solid #ddd;
        border-radius: 3px;
        background: #fff;
        text-align: center;
        margin: 10px 10px;
        position: relative;
        padding-top: 40px;
        color: #9c9c9c;
        font-size: 12px;
        text-decoration: none;
        line-height: 25px;
        overflow: hidden;
    }

    #move a i {
        position: absolute;
        top: 20px;
        left: 0;
        display: inline-block;
        width: 100%;
        text-align: center;
        opacity: 1;
        filter: alpha(opacity=100);
        /*transition: all .3s ease-in;*/
    }

    #move a:hover {
        color: #f00;
    }

    #move a:hover .i1{
        -webkit-animation: taobao .5s ease-in-out .1s;
        -o-animation: taobao .5s ease-in-out .1s;
        animation: taobao .5s ease-in-out .1s;
    }

    /*#move a:hover .i1 {*/
        /*top: -25px;*/
        /*opacity: 0;*/
    /*}*/
    @keyframes taobao {
        from{
            top: 20px;
            opacity: 1;
        }
        50%{
            top: -25px;
            opacity: 0;
        }
        75%{
            top: 30px;
            opacity: 0;
        }
        to{
            top: 20px;
            opacity: 1;
        }
    }

    #move img {
        border: none;
    }
    </style>
    <!--<script type="text/javascript" src="jQ/jquery-1.4.4.min.js"></script>-->
    <!-- <script>
        $(function(){
            $('#move a').mouseenter(function(){
                $(this).find('i').animate({top:'-25px',opacity:'0'},300,'swing',function(){
                    $(this).css({top:'30px'})
                    $(this).animate({top:'20px',opacity:'1'},300,'swing')
                })
            })
        })
    </script> -->
</head>

<body>
    <div id='move'>
        <a href='#'><i class="i1"><img src="images/tickets.png"></i><p>彩票</p></a>
        <a href='#'><i class="i2"><img src="images/film.png"></i><p>电影</p></a>
        <a href='#'><i class="i3"><img src="images/fork.png"></i><p>外卖</p></a>
        <a href='#'><i><img src="images/fly.png"></i><p>缴费</p></a>
        <a href='#'><i><img src="images/game.png"></i><p>游戏</p></a>
        <a href='#'><i><img src="images/protection.png"></i><p>理财</p></a>
    </div>
</body>

</html>

查看全部

3 采集收起来源：jQuery动画案例

2018-06-09

贝壳壳

1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。
注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=100)
2、由于无法获取对象的透明度，所以可通过变量储存。（var alpha=初始值 alpha+=speed）
3、IE：style.filter=‘alpha(opactiy:’+值+')' 非IE .style.opactiy=值/100（火狐或者chrome关于透明度的满值1，IE是100）

查看全部

3 采集收起来源：JS透明度动画
2018-04-12
刀不磨要生锈

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缓冲运动</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background-color: blue;
position:absolute;
left: 200px;
top: 75px;
}
</style>

<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");//oDiv是局部变量，只在此函数内有效
//鼠标移入事件
oDiv.onmouseover=function(){
starMove(0);
}
//鼠标移出事件
oDiv.onmouseout=function(){
starMove(-200);
}

var timer = null;
function starMove(target){
clearInterval(timer);//解决“speed”的叠加问题
var oDiv=document.getElementById("div1");
//创建一个定时器timer
timer=setInterval(function(){

var speed =(target - oDiv.offsetLeft)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(oDiv.offsetLeft==target){
clearIntral(timer);//符合条件运动停止
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>

</head>
<body>
<div id = div1>
<span>分享</span>
</div>
</body>
</html>

查看全部

3 采集收起来源：JS缓冲动画
2018-04-10
禾木

<script> window.onload = function(){ var aLi = document.getElementsByTagName("li"); for(var i=0; i<aLi.length; i++){ aLi[i].timer = null; aLi[i].onmouseover = function(){ startMove(this,400); }; aLi[i].onmouseout = function(){ startMove(this,200); }; } }; function startMove(obj,liTa){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (liTa - obj.offsetWidth)/8; speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth == liTa){ clearInterval(obj.timer); }else{ obj.style.width = obj.offsetWidth+speed+'px'; } },30); } </script>

查看全部

3 采集收起来源：JS多物体动画
2018-03-22
小学弟啦啦啦

 opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。. 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity属性值是0~1*/ 【没有直接的属性可以改变透明度，需要定义一个alpha】 var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer); }else{ alpha += speed; oDiv.style.filter = "alpha(opactiy:"+alpha+")";（IE） oDiv.style.opactiy = alpha/100;（火狐或chrome，它们的这个系数的满值是100，这里需要的满值是1） } },30) }

查看全部

3 采集收起来源：JS透明度动画
2018-03-22
慕工程2957023

照着老师的代码打，发现有个问题，就是flag没有定义在定时器内。因为flag如果定义在定期器外，flag只执行了一遍，当循环了一次后，flag变成了false就不会再改变了。flag一直都是false，就无法关闭定时器和执行下一个函数了。结论：flag要定义在定期器内

查看全部

3 采集收起来源：完美运动框架
2016-09-14
雷蛇

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0; padding:0;} #div1{width:500px; height:500px; background: #F00; opacity:0.3; filter:alpha(opacity:30);}/* opacity:0.3; filter:alpha(opacity:30)设置透明度*/ </style> <script type="text/javascript"> window.onload = function(){ var odiv = document.getElementById('div1'); odiv.onmouseover = function(){ startMove(100); } odiv.onmouseout = function(){ startMove(30); } } var time = null; var alpha = 30;//透明度没有属性所以，创建透明变量，并赋值属性 function startMove(iTarget){ var odiv = document.getElementById('div1'); clearInterval(time); time = setInterval(function(){ var speed = 0; if(alpha < iTarget){ speed = 10; } else { speed = -10; } if(alpha == iTarget){ clearInterval(time); } else { alpha += speed; odiv.style.filter = 'alpha(opacity:'+alpha+')'; odiv.style.opacity = alpha / 100; } },50); } </script> </head> <body> <div id="div1"> </div> </body> </html>

查看全部

3 采集收起来源：JS透明度动画
2018-03-22
Fstar

照着老师的代码打，发现有个问题，就是flag没有定义在定时器内。因为flag如果定义在定期器外，flag只执行了一遍，当循环了一次后，flag变成了false就不会再改变了。flag一直都是false，就无法关闭定时器和执行下一个函数了。结论：flag要定义在定期器内（旗子要立好！！）

查看全部

2 采集收起来源：完美运动框架
2016-04-04
漩涡鸣人007

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>多物体移动</title> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;} ul li{width: 200px;height: 100px;background: yellow;margin-bottom: 20px;} </style> <script type="text/javascript"> window.onload=function(){ var olis=document.getElementsByTagName('li'); for(var i=0,l=olis.length;i<l;i++){ olis[i].timer=null; olis[i].onmouseover=function(){ startMove(this,400); } olis[i].onmouseout=function(){ startMove(this,200); } } } //var timer=null; function startMove(obj,target){ clearInterval(obj.timer); var speed=(target-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); obj.timer=setInterval(function(){ if(obj.offsetWidth==target){ clearInterval(obj.timer); }else{ obj.style.width=obj.offsetWidth+speed+'px'; } },30) } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>

查看全部

2 采集收起来源：JS多物体动画
2018-03-22
漩涡鸣人007

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>多物体改变透明度</title> <style> *{margin:0;padding:0;} div{width:100px;height:100px;margin:10px;float:left;background:green;filter:alpha(opacity:30);opacity:0.3;} </style> <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for(var i=0,l=oDiv.length;i<l;i++){ oDiv[i].alpha=30; oDiv[i].onmouseover=function(){ startChange(this,100); } oDiv[i].onmouseout=function(){ startChange(this,30); } } } function startChange(obj,target){ clearInterval(obj.timer); var speed=obj.alpha>target?-10:10; obj.timer=setInterval(function(){ //var speed=obj.alpha>target?-10:10; if(obj.alpha==target){ clearInterval(obj.timer); }else{ obj.alpha+=speed; obj.style.filter='alpha(opacity:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } },30) } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html>

查看全部

2 采集收起来源：JS多物体动画
2018-03-22
门上的摇晃头脑还在炫耀 04:44

缓动速度的计算:目标―当前/比例系数，可以得出速度的正负和速度的缓动，比例系数越大，速度越慢。然后将速度进行取整处理，当速度为负数，向下取整，反之向上取整

查看全部

2 采集收起来源：JS缓冲动画
2016-03-24
qq_不会飞的mg鱼_0

<!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> 

查看全部

2 采集收起来源：获取样式
2018-03-22