JS动画效果_技术笔记

weixin_精慕门4485437 2020-08-22

q123

截图
0赞 · 0采集
Ocio 2020-07-30

math.round四舍五入

0赞 · 0采集

qq_慕雪6274093 2020-07-05

<html>
    <head>
    <style>
        div{
        width:200px;
        height;200px
        background-color:red;
        opacity:.3;
        }
    </style>
    </head>
    <body>
    <div>
    </div>
    
    <script>
        var adiv=document.querSelector("div");
        adiv.onmouseover=function(){
            startMove(100);
        }
         adiv.onmouseout=function(){
            startMove(30);
        }
        var time=null;
        var opacitys=30;
        function startMove(Itarge){
            clearServeteval(time);
            var adiv=document.querSeletor('div');
            time=setInterval(function(){
                var seep=0;
                if( opacitys>Itarget)
                    seep=-10;
                 else
                     seep=10;
                if(opacitys==Itarge){
                clearSetInterval(time);
                    }
                    else{
                    opacitys+=seep;
                    adiv.style.opacity=opactys/100;
                    }
            },100)
        }
        
    </script>
    </body>
</html>

0赞 · 0采集

VictoryLang 2020-07-05

并没有出现老师的小数闪烁情况，但是出现了多小数形式的current值，所以为了完善，避免复现BUG，还是使用了Math.round函数

0赞 · 0采集
一只小马甲甲 2020-07-01

JS设置css值 XXX.style.xxx 获取css值 XXX.offsetxxx
比如　oDiv.style.left = oDiv.offsetLeft + 10 + 'px';

截图
0赞 · 0采集
weixin_慕后端6529359 2020-05-26

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height:200px;
background: red;
filter:alpha(opacity=30);
opacity: 0.3;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
starmove(100);
}
oDiv.onmouseout = function() {
starmove(30);
}
}
var timer = null;
var alpha = 30;
function move(iTarget) {
var alpha = 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(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},40)
}
</script>
<div id="div1">
</div>
</body>
</html>

0赞 · 0采集
林疏雪正是在下 2019-11-07

获取任意值属性封装函数，敲在本地运行记录验证

0赞 · 0采集
林疏雪正是在下 2019-11-07

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

0赞 · 0采集
喵叽 2019-09-01

运动框架实现思路
1、速度（改变值left、right、width、height、opacity）
2、缓冲运动
3、多物体运动
4、任意值变换
5、链式运动
6、同时运动

0赞 · 1采集
xiaowan321 2019-08-20

var speed = (iTarget-oDiv.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
缓冲动画

截图
0赞 · 0采集
xiaowan321 2019-08-20

Math.floor() 向下取整；
Math.ceil() 向上取整；

截图
0赞 · 0采集
xiaowan321 2019-08-19

if(alpha == iTarget){
clearInterval(timer);
}
else{
alpha+=speed;
oDiv.style.filter = 'alpha(opactiy:'+alpha+')';
oDiv.syle.opacity = alpha/100;
}

截图
0赞 · 0采集
little慕慕 2019-08-10

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>More</title>
<style type="text/css">
body, ul, li, span {
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
background-color: red;
width: 200px;
height: 100px;
margin-bottom: 20px;
border: 4px solid black;
filter: alpha(opacity=30);/*针对IE设置透明度*/
opacity: 0.3;/*针对火狐/chrome浏览器*/
}
</style>
<script src="same.js"></script>
<script>
window.onload = function() {
var li1=document.getElementById("li1");
li1.onmouseover=function(){
startMove(li1,{width:201,height:200,opacity:100});
}
li1.onmouseout=function(){
startMove(li1,{width:200,height:100,opacity:30});
}
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
</ul>
</body>
</html>

function getStyle(obj,attr) {
if(obj.currentStyle){//IE浏览器
return obj.currentStyle[attr];
}
else{//firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn) {//添加一个回调函数fn
var flag=true;//假设,标志所有运动是否到达目标值
clearInterval(obj.timer);
obj.timer = setInterval(function(){
for(var attr in json){
//1.取当前的值
var icur=null;
if(attr=='opacity'){
icur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
icur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed = (json[attr]-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
//3.检测停止
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)
}

0赞 · 0采集
little慕慕 2019-08-10

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>More</title>
<style type="text/css">
body, ul, li, span {
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
background-color: red;
width: 200px;
height: 100px;
margin-bottom: 20px;
border: 4px solid black;
}
#li3 {
filter: alpha(opacity=30);/*针对IE设置透明度*/
opacity: 0.3;/*针对火狐/chrome浏览器*/
}
</style>
<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);
// }
// }
var li1=document.getElementById("li1");
var li2=document.getElementById("li2");
var li3=document.getElementById("li3");
li1.onmouseover=function(){
startMove(this,'width',400);
}
li1.onmouseout=function(){
startMove(this,'width',200);
}
li2.onmouseover=function(){
startMove(this,'height',200);
}
li2.onmouseout=function(){
startMove(this,'height',100);
}
li3.onmouseover=function(){
startMove(this,'opacity',100);
}
li3.onmouseout=function(){
startMove(this,'opacity',30);
}
}
function getStyle(obj,attr) {
if(obj.currentStyle){//IE浏览器
return obj.currentStyle[attr];
}
else{//firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr,liTa) {
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 = (liTa-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (icur == liTa) {
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>
<li id="li3"></li>
</ul>
</body>
</html>

0赞 · 0采集
little慕慕 2019-08-09

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>More</title>
<style type="text/css">
body, ul, li, span {
margin: 0;
padding: 0;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
background-color: pink;
width: 200px;
height: 100px;
margin-bottom: 20px;
border: 4px solid black;
}
</style>
</head>
<body>
<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);
// }
// }
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',200);
}
li2.onmouseout=function(){
startMove(this,'height',100);
}
}
function getStyle(obj,attr) {
if(obj.currentStyle){//IE浏览器
return obj.currentStyle[attr];
}
else{//firefox浏览器
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,attr, liTa) {
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var icur=parseInt(getStyle(obj,attr));
var speed = (liTa-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if (icur == liTa) {
clearInterval(obj.timer);
}
else {
obj.style[attr] = icur+speed+'px';
}
},30)
}
</script>
<div>
<ul>
<li id="li1"></li>
<li id="li2"></li>
</ul>
</div>
</body>
</html>

0赞 · 0采集
little慕慕 2019-08-08

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
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>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(0);
}
oDiv.onmouseout = function() {
move(-200);
}
}
var timer = null;
function move(dis) {
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function() {
var speed = (dis - oDiv.offsetLeft)/20;
speed = speed >0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetLeft == dis) {
clearInterval(timer);
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30)
}
</script>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>

0赞 · 0采集
little慕慕 2019-08-08

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
margin: 0;
padding: 0;
}
#div1 {
width: 400px;
height: 400px;
background: red;
/* filter:alpha(opacity=30); */
opacity: 0.3;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(100);
}
oDiv.onmouseout = function() {
move(30);
}
}
var timer = null;
var opa = 30;
function move(target) {
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function() {
var speed = 0;
if(opa < target) {
speed = 10;
}
else {
speed = -10;
}
if(opa == target){
clearInterval(timer);
}
else{
opa += speed;
// oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = opa/100;
}
},40)
}
</script>
<div id="div1">
</div>
</body>
</html>

0赞 · 0采集
little慕慕 2019-08-08
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cartoon</title>
<style type="text/css">
body, div, span {
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>
<script>
window.onload = function() {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function() {
move(0);
}
oDiv.onmouseout = function() {
move(-200);
}
}
var timer = null;
function move(dis) {
clearInterval(timer);
var oDiv = document.getElementById("div1");
timer = setInterval(function() {
var speed = 0;
if(oDiv.offsetLeft > dis){
speed = -10;
}
else {
speed = 10;
}
if(oDiv.offsetLeft == dis) {
clearInterval(timer);
}
else {
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30)
}
</script>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
1赞 · 7采集
qq_心安有个你_0 2019-07-27

<!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赞 · 0采集
qq_心安有个你_0 2019-07-27

<!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赞 · 0采集
qq_心安有个你_0 2019-07-27

<!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赞 · 0采集
qs九点九分 2019-06-21

111111

截图
0赞 · 0采集
甜橙可爱多 2019-04-23

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

0赞 · 0采集
甜橙可爱多 2019-04-22

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

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

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

截图
0赞 · 0采集

慕粉0815224883 2019-04-01

<!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赞 · 1采集

慕粉0815224883 2019-04-01

<!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赞 · 0采集

Sandaydi 2019-03-16

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赞 · 0采集

Sandaydi 2019-03-12

运动框架实现思路

截图
0赞 · 0采集
weixin_慕函数6093326 2019-01-17

fliter标签

截图
0赞 · 0采集

数据加载中...