JS动画效果_学习笔记

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

JS动画效果

最热最新

qq_心安有个你_0

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           *{
           margin: 0;
           padding: 0;
       }
       #div1{
           width: 200px;
           height: 200px;
           background: red;
           filter: alpha(opcity:30);
           opacity: 0.3;
       }
       </style>
   </head>
   <body>
       <div id="div1">


       </div>
   </body>
   <script>

       window.onload=function(){
           var oDiv=document.getElementById('div1');

           oDiv.onmouseover=function(){
               startMove(100);
           }
           oDiv.onmouseout=function(){
               startMove(30);
           }

       }
       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+')';
                   oDiv.style.opacity=alpha/100;
               }

           });
       }






   </script>

</html>

查看全部

0 采集收起来源：JS透明度动画
2019-07-27
qq_心安有个你_0

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

       <div id="div1">
           <span id="share">xc</span>
       </div>


   </body>

   <script>

       window.onload=function(){
           var oDiv=document.getElementById('div1');

           oDiv.onmouseover=function(){
               startMove(10,0);
           }
           oDiv.onmouseout=function(){
               startMove1(10,-200);
           }


       }
       var timer=null;
       function startMove(sleep,taiger){
           clearInterval(timer)
           var oDiv=document.getElementById('div1');
           timer=setInterval(function(){
               if(oDiv.offsetLeft==taiger){
                   clearInterval(timer);
               }
               else{
                   oDiv.style.left=oDiv.offsetLeft+sleep+'px';
               }
           },30);
       }

       function startMove1(sleep,taiger){
           clearInterval(timer)
           var oDiv=document.getElementById('div1');
           timer=setInterval(function(){
               if(oDiv.offsetLeft<= taiger){
                   clearInterval(timer);
               }
               else{
                   oDiv.style.left=oDiv.offsetLeft-sleep+'px';
               }
           },30);
       }

   </script>



</html>

查看全部

2 采集收起来源：JS速度动画
2019-07-27
qq_心安有个你_0

<!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.onmouseover=function(){
starMove(0);
}
//鼠标移出事件
oDiv.onmouseout=function(){
starMove(-200);
}

var timer = null;
function starMove(target){
clearInterval(timer);
var oDiv=document.getElementById("div1");
//创建一个定时器timer
timer=setInterval(function(){

var speed =(target - oDiv.offsetLeft)/20;
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>

查看全部

0 采集收起来源：JS缓冲动画
2019-07-27
qs九点九分 03:32

111111

查看全部

0 采集收起来源：JS动画效果课程介绍
2019-06-21
甜橙可爱多

当加了一个定时器后，为什么不清除定时器，动画也能停止？
注意：在缓冲运动中，一定是在缓冲运动中，speed的值为0后动画停止了，此时定时器实际上还在运行中。

查看全部

0 采集收起来源：完美运动框架
2019-04-23
甜橙可爱多

Math.floor(num)向下取整
Math.ceil(num)向上取整
0.5向上取整为1，向下取整为0
-0.5向上取整为0，向下取整为-1

查看全部

0 采集收起来源：JS缓冲动画
2019-04-22
howevert 11:31

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

查看全部

0 采集收起来源：获取样式
2019-04-05

慕粉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;
        }
    </style>
    <script type='text/javascript'>
        window.onload=function(){
            var oLi=document.getElementsByTagName('li');
            for(var i=0;i<oLi.length;i++){
                oLi[i].onmouseover=function(){
                    var that=this;
                    startMove(this,{width:400,height:200},function(){
                        startMove(that,{opacity:100});
                    });
                }
                oLi[i].onmouseout=function(){
                    var that=this;
                    startMove(this,{height:100,width:200},function(){
                        startMove(that,{opacity:30})
                    });
                }
            }
        }
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
        function startMove(obj,json,fn){
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                for(var attr in json){
                    var flag = true;
                    var icur=null;
                    if(attr=='opacity'){
                        icur=Math.round(parseFloat(getStyle(obj,attr))*100);
                    }
                    else{
                        icur=parseInt(getStyle(obj,attr));
                    }
                    var speed=(json[attr]-icur)/8;
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);

                    if(icur!=json[attr]){
                        flag = false;
                    }
                    if(attr=='opacity'){
                        obj.style.filter='alpha(opacity:'+(icur+speed);
                        obj.style.opacity=(icur+speed)/100;
                    }
                    else{
                        obj.style[attr]=icur+speed+'px';
                    }
                }
                if (flag) {
                    clearInterval(obj.timer);
                    if(fn) {
                        fn();
                    }
                }
            },30)
        }
    </script>
</head>

<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

查看全部

2 采集收起来源：完美运动框架

2019-04-01

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

0/150

提交

取消

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

JS动画效果