js动画

最新推荐文章于 2018-08-02 14:31:24 发布
最新推荐文章于 2018-08-02 14:31:24 发布
阅读量218 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jj546630576/article/details/77505195
版权 
js 动画
 1、鼠标移入移出 、单物体运动动画

<div  id='mydiv' style="border: 1px solid red; width: 100px;height: 100px;position: relative;left: -100px;">
     <span style="position: absolute;left: 100px;border: 1px solid green;">分享</span>
    </div>

    <div id='mydiv2' style="width: 100px;height: 100px;background-color: green;opacity:0.1;filter:alpha(opacity=10);">
    </div>
    <script type="text/javascript">
        //匀速显示、隐藏 
        var mydiv = document.getElementById('mydiv'),
            timer = null;
        mydiv.onmouseover = function(){
           moveDiv(10,0);
        }
        mydiv.onmouseout = function(){
           moveDiv(-10,-100);
        }
        function moveDiv(speed,iTarget){
            var mydiv = document.getElementById('mydiv');
            clearInterval(timer);
            timer = setInterval(function(){
                if(mydiv.offsetLeft == iTarget){
                     clearInterval(timer);
                }else{
                      mydiv.style.left = mydiv.offsetLeft + speed + 'px';
                }

            },30)
        }


    //开始快、后来慢非匀速移动显示隐藏
       var mydiv = document.getElementById('mydiv'),
        timer = null;

        mydiv.onmouseover = function(){
            moveDiv(0,10);
        }
        mydiv,onmouseout = function(){
            moveDiv(-100,-10);
        }

        function moveDiv(iTarget,speed){
            var mydiv = document.getElementById('mydiv');
            clearInterval(timer);
            timer = setInterval(function(){
                speed = (iTarget - mydiv.offsetLeft) /20;
                speed = speed > 0 ? Math.ceil(speed): Math.floor(speed); //>0右移否则左移，所有这种判断都要取整
                if(iTarget == mydiv.offsetLeft){
                    clearInterval(timer);
                }else{
                    mydiv.style.left = mydiv.offsetLeft + speed + 'px';
                }
            },30)
        }


    //修改透明度
        var mydiv2 = document.getElementById('mydiv2'),
            timer2 = null,
            alpha = 10;
        mydiv2.onmouseover = function(){
           moveDiv2(3,90);
        }
        mydiv2.onmouseout = function(){
            alert(22);
           moveDiv2(-3,10);
        }
        function moveDiv2(speed,iTarget){
            clearInterval(timer2);
            var mydiv2 = document.getElementById('mydiv2');
            timer2 = setInterval(function(){
                if(alpha == iTarget){
                     clearInterval(timer2);
                }else{
                    alpha += speed
                    mydiv2.style.filter ='alpha(opactiy:'+alpha+')' ;
                    mydiv2.style.opacity = alpha/100;
                }
            },30)
        }

    </script>




2、多物体运动动画

<div   style="border: 1px solid red; width: 100px;height: 100px;position: relative;left: -100px;">
     <span style="position: absolute;left: 100px;border: 1px solid green;">分享</span>
    </div>

    <div  style="border: 1px solid red; width: 100px;height: 100px;position: relative;left: -100px;">
     <span style="position: absolute;left: 100px;border: 1px solid green;">分享</span>
    </div>

    <div  style="border: 1px solid red; width: 100px;height: 100px;position: relative;left: -100px;">
     <span style="position: absolute;left: 100px;border: 1px solid green;">分享</span>
    </div>
    <script type="text/javascript">
    var mydivs = document.getElementsByTagName('div');
    for (var i = 0; i < mydivs.length; i++) {
        mydivs[i].timer = null;
        mydivs[i].onmouseover = function(){
                moveDiv(this,0,10);
        }
        mydivs[i].onmouseout = function(){
                moveDiv(this,-100,-10);
        }
    }

    function moveDiv(obj,iTarget,speed){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            speed = (iTarget - obj.offsetLeft) /20;
            speed = speed > 0 ? Math.ceil(speed): Math.floor(speed); //>0右移否则左移
            if(iTarget == obj.offsetLeft){
                clearInterval(obj.timer);
            }else{
                obj.style.left = obj.offsetLeft + speed + 'px';
            }
        },30)
    } 






3、公用方法、变换任意属性、透明度、宽度、高度

 <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
<style type="text/css">
    *{margin: 0;padding: 0}
    div{width: 100px;}
</style>
</head>
<body>
   <div style="background-color:red;height: 100px;position: relative;left: 0px"></div>
    <div style="background-color:red;height: 100px;position: relative;left: 0px;margin-top: 10px;"></div>
    <div style="background-color:red;height: 100px;position: relative;left: 0px;margin-top: 10px;filter:alpha(opacity:30);opacity:0.3;"></div>

    <script type="text/javascript">
        var mydiv1 = document.getElementsByTagName('div')[0];
        var mydiv2 = document.getElementsByTagName('div')[1];
        var mydiv3 = document.getElementsByTagName('div')[2];

        mydiv1.onmouseover = function(){
            moveDiv(this,200,'width');
        }
        mydiv1.onmouseout = function(){
            moveDiv(this,100,'width');
        }
        mydiv2.onmouseover = function(){
            moveDiv(this,200,'height');
        }
        mydiv2.onmouseout = function(){
            moveDiv(this,100,'height');
        }
        mydiv3.onmouseover = function(){
            moveDiv(this,100,'opacity');
        }
        mydiv3.onmouseout = function(){
            moveDiv(this,30,'opacity');
        }

        function moveDiv(obj,iTarget,attr){

            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var icur = 0;
                if(attr =='opacity' || attr == 'filter'){
                    attr = 'opacity';
                    icur= Math.round(parseFloat(getStyle(obj,attr)) * 100);

                }else{
                    icur= parseInt(getStyle(obj,attr));
                }

                var speed = ( iTarget - icur ) /8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                var num = icur + speed;
                if(iTarget ==icur){
                    clearInterval(obj.timer);
                }else{
                    if(attr =='opacity'){
                        console.log(icur + speed);
                        //透明度
                        obj.style.filter ='alpha(opacity:'+num+')' ;
                        obj.style.opacity = num/100;
                    }else{
                        //其他属性
                        obj.style[attr] = num + 'px';
                    }
                }
            },30)
        }

        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
    </script>
</body>
</html>


4、先变宽、在变高

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
<style type="text/css">
    *{margin: 0;padding: 0}
</style>
</head>
<body>
    <div style="background-color:red;height: 100px;width: 100px;position: relative;left: 0px"></div>
    <script type="text/javascript">
        var mydiv1 = document.getElementsByTagName('div')[0];
        mydiv1.onmouseover = function(){
            moveDiv(mydiv1,200,'width',function(){
                moveDiv(mydiv1,200,'height')
            });
        }
        mydiv1.onmouseout = function(){
            moveDiv(mydiv1,100,'width',function(){
                  moveDiv(mydiv1,100,'height')
            });
        }

        function moveDiv(obj,iTarget,attr,fn){

            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var icur = 0;
                if(attr =='opacity' || attr == 'filter'){
                    attr = 'opacity';
                    icur= Math.round(parseFloat(getStyle(obj,attr)) * 100);

                }else{
                    icur= parseInt(getStyle(obj,attr));
                }

                var speed = ( iTarget - icur ) /8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                var num = icur + speed;
                if(iTarget ==icur){
                    clearInterval(obj.timer);
                    if(fn){
                        fn();
                    }
                }else{
                    if(attr =='opacity'){
                        console.log(icur + speed);
                        //透明度
                        obj.style.filter ='alpha(opacity:'+num+')' ;
                        obj.style.opacity = num/100;
                    }else{
                        //其他属性
                        obj.style[attr] = num + 'px';
                    }
                }

            },30)
        }

        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
    </script>
</body>
</html>


5、鼠标移入 多个动画同时改变

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv=Content-Type content="text/html;charset=utf-8">
<style type="text/css">
    *{margin: 0;padding: 0}
</style>
</head>
<body>
    <div style="background-color:red;height: 100px;width: 100px;position: relative;left: 0px;opacity:0.3;filter:alpha(opacity:30);"></div>
    <script type="text/javascript">
        var mydiv1 = document.getElementsByTagName('div')[0];
        mydiv1.onmouseover = function(){
            moveDiv(mydiv1,{width:101,height:200,opacity:100});
        }
        mydiv1.onmouseout = function(){
          moveDiv(mydiv1,{width:100,height:100,opacity:30});
        }

        function moveDiv(obj,json,fn){ //json={width:200,height:200}
            var flag = true; //判断是否所有属性都到达目标值，用来关闭定时器
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                for(var attr in json){
                    var icur = 0;
                    if(attr =='opacity' || attr == 'filter'){
                        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);
                    var num = icur + speed;
                    if(json[attr] !=icur){ //不是所有属性都到达目标值
                        flag = false;
                    }

                    if(attr =='opacity'){
                        //透明度
                        obj.style.filter ='alpha(opacity:'+num+')' ;
                        obj.style.opacity = num/100;
                    }else{
                        //其他属性
                        obj.style[attr] = num + 'px';
                    }

                    if(flag === true){ //所有属性都到达目标值关闭
                        clearInterval(obj.timer);
                        if(fn){
                            fn();
                        }
                    }
                }
            },30)
        }

        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
    </script>
</body>
</html>
Mikaelemmmm
关注
专栏目录
HTML5+JavaScript动画基础（文本+源码）
12-05
在“HTML5+JavaScript动画基础”这个主题中，我们深入探讨如何利用这两者构建引人入胜的动画效果。 首先，HTML5新增了许多元素和API，如canvas标签，它提供了一个画布，允许开发者通过JavaScript绘制图形并实现动态...
js动画函数
05-30
综上所述，JavaScript动画函数是Web开发中的重要技能，熟练掌握并灵活运用可以帮助开发者创造出丰富的用户体验。通过选择合适的库或自定义函数，结合CSS3特性，我们可以实现各种各样的动态效果，提升网站的互动性和...
七夕表白js动画
09-05
JavaScript动画通常使用定时器（如`setInterval`或`setTimeout`）来实现帧动画，通过改变元素的位置、大小、颜色等属性，创建出连续的效果。在这个表白动画中，可能包括了心跳、闪烁的文字、爱心飞舞等元素，这些都...
JavaScript动画引擎
06-29
JavaScript动画引擎，如Animation.js，是开发者用于在Web页面上创建流畅、动态视觉效果的关键工具。这个引擎的设计理念是作为一个轻量级、可扩展的解决方案，帮助开发者自定义和控制他们的动画过程，而不是提供预设...
anime.js动画引擎制作酷炫网页背景动画特效特效代码
03-20
anime.js 是一款强大的JavaScript动画库，专为网页开发者设计，以创建各种酷炫的动画效果。这个库以其轻量级、高性能和易于使用的特性而受到广泛的欢迎。在本项目中，"anime.js动画引擎制作酷炫网页背景动画特效特效...
<script type="text/html"></script> js模版使用
吕秀军的博客
08-22 4949
1         2         3         4     1.首先这种写，在页面渲染的时候，浏览器不会读取script标签中的html代码 2.外面不能获取到里面的div节点 所以：         在使用时，要在script标签上加个ID可以供我们找到它，        即然做模版用，且里面的html代码不会被
阿里云oss的jssdk 使用
吕秀军的博客
07-18 4839
https://github.com/ali-sdk/ali-oss?spm=5176.doc32068.2.2.dK7evN#abortmultipartuploadname-uploadid-options
输入地址模糊匹配选择地址
吕秀军的博客
08-02 4781
&lt;!DOCTYPE html&gt; &lt;html&gt;   &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content="initial-scale=1.0, u
js面向对象，封装、继承、多态、静态方法
吕秀军的博客
08-28 968
//1、json创建对象 //js对象只是一个属性字典，就像php中的关联数组，因此可以直接造对象 var ori = {} //地球上最原始的蛋白质 var c = {ceil:1} //单细胞动物 var chicken = {leg:2,song:function(){console.log('我是一只小小鸟')}} console.log(ori,c,chicken) chicken.son
js的词法分析
吕秀军的博客
08-22 890
JavaScript代码运行前有一个类似编译的过程即词法分析，词法分析主要有三个步骤：分析参数 再分析变量的声明 分析函数声明 具体步骤如下：函数在运行的瞬间，生成一个活动对象（Active Object），简称AO 第一步：分析参数： 函数接收形式参数，添加到AO的属性，并且这个时候值为undefine,即AO.age=undefine 接收实参，添加到AO的属性，覆盖之前的undef
js获取运行时内存样式
吕秀军的博客
08-23 619
if(obj.currentStyle){ //支持IE return obj.currentStyle[attr]; }else{ //W3C return getComputedStyle(obj,false)[attr]; }
ES6常用语法
吕秀军的博客
03-26 300
一、let、const、var var：块级，容易污染全局 let、const：局部 1.1定义变量防止污染全局，因为他们输局部变量，var是块变量： { let name = "yes" console.log(name) //yes } console.log(name) //window.name 1.2 for循环要使用let声明，因为这样每次循环式一个作用于，如果用...
JS事件委托
吕秀军的博客
08-28 298
html <ul id="wrap"> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul>js $(function(){ // 普通事件 $('li').click(function(){ $(this).css('ba
js无缝滚动
吕秀军的博客
08-23 251
marquee:循环滚动例子: <marquee onmouseover="this.stop();" onmouseout="this.start();>This text will scroll from right to left</marquee> <marquee direction="up">This text will scroll from bottom to top</marq
js事件基础
吕秀军的博客
08-23 222
1、Html标签中写事件 2、DOM 0级 document.getElementById('xx').onclick = function(){}... document.getElementById('xx').onclick = null; //删除 3、 DOM 2级 非IE8以上(不包括IE8、谷歌、火狐等支持的) //第三个参数false 开启冒泡效率高 ，默认为true捕获事件,效率
js常用容易忘记的节点操作
吕秀军的博客
08-23 219
1、获取所有子节点     1.1 有兼容性获取子节点      var allChild =  parent.childNodes;//获取所有子节点，有兼容性问题，ie6-8没问题，ie9以上包括w3c浏览器，会把空白处也算作节点      for(var i = 0;i             if(allChild[i].nodeTyle == 1){              
js闭包详解
吕秀军的博客
08-28 219
//js闭包 function t1(){ var a = 20; function t2(){ alert(a) } return t2 } a = 1 var tmp = t1() tmp() //20 /* 在大部分的语言中,t1被调用执行，则申请内存，并把其局部变量push入栈,t1函数执行完毕，内部变量随着函数退出而销毁， 因此var age
js中的this
吕秀军的博客
08-28 173
//js高级//this //1、如果是普通方法,this指向window，准确的说是this指向null被解释到window，在ECMASCRIPT5，如果this为null，则解释成undefined function t(){ this.x = 1; } console.log(window.x) // 1//2、作为对象方法来调用，this指向该对象 var obj = {xx:1
javascript动画库：Fx.js 动画类详解
"发布一个基于JavaScript的动画库Fx.js，支持大部分CSS3属性的动画效果，包括颜色、背景色和透明度等，并提供了详细的API控制，如动画开始、暂停、恢复和停止等操作。" 在JavaScript开发中，动态效果和动画是提升...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值