精华内容
下载资源
问答
  • 某课网----------------JS动画效果的所有课程源代码,包括图片素材,都可直接运行。(含注释)
  • 多html5精美模板,含大量css特效,js动画效果,以及精美图片实例
  • 前段时间为了做动画,学习了一下tween算法的使用,这几天根据tween算法,然后根据各种材料参考,做了一个简单的动画函数.
  • JavaScript动画效果

    千次阅读 2016-01-12 11:20:46
    记录学习”JavaScript动画效果”笔记JavaScript动画效果速度动画在鼠标移入移出div元素时,设置的动画 window.onload = function () { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function ...

    记录学习”JavaScript动画效果”笔记

    JavaScript动画效果

    速度动画

    在鼠标移入移出div元素时,设置的动画

            window.onload = function () {
                var oDiv = document.getElementById("div1");
                oDiv.onmouseover = function () { //鼠标移入事件
                    startMove(0);
                };
                oDiv.onmouseout = function () {//鼠标移出事件
                    startMove(-200);
                }
            }
    var timer = null;
            function startMove(iTarget){
                clearInterval(timer);
                var oDiv = document.getElementById("div1");
                timer = setInterval(function () {
                    var speed = 0;
                    if(oDiv.offsetLeft > iTarget){
                        speed = -10;
                    }else{
                        speed = 10;
                    }
                    if(oDiv.offsetLeft == iTarget){
                        clearInterval(timer);
                    }else{
                        oDiv.style.left = oDiv.offsetLeft + speed + "px";
                    }
                }, 30);
            }

    效果如下:
    这里写图片描述

    透明度动画

    设置鼠标移入时,透明度为100,移出时,为30。

            window.onload = function () {
                var oDiv = document.getElementById("div1");
                oDiv.onmouseover = function () {
                    startMove(100);//鼠标移入的时候,透明度变为100
                };
                oDiv.onmouseout = function () {
                    startMove(30);//鼠标移出的时候,透明度变为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(opacity:"+alpha+")";
                        oDiv.style.opacity = alpha / 100;
                    }
                }, 30);
            };

    效果如下:
    这里写图片描述

    缓冲运动

    在”速度动画”中,动画的速度是均匀的,调整以下,使其做缓冲运动:

            var timer = null;
            function startMove(iTarget){
                clearInterval(timer);
                var oDiv = document.getElementById("div1");
                timer = setInterval(function () {
                    var speed = (iTarget-oDiv.offsetLeft) / 20;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    if(oDiv.offsetLeft == iTarget){
                        clearInterval(timer);
                    }else{
                        oDiv.style.left = oDiv.offsetLeft + speed + "px";
                    }
                }, 30);
            }

    效果如下:
    这里写图片描述

    多物体动画

    多物体动画

    实现ul列表中ul动画,在鼠标移入和移出时改变其width:

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

    效果如下:
    这里写图片描述

    获取样式

    如下例子,本意是使宽度减少,结果却不是这样的,宽度却在增加:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取样式</title>
        <style type="text/css">
            #div1{
                width: 200px;
                height: 200px;
                background-color: red;
                border: 2px solid black;
            }
        </style>
        <script type="text/javascript">
    
            window.onload = function () {
                animation();
            }
            function animation(){
    
                var aDiv = document.getElementById("div1");
                setInterval(function(){
                    aDiv.style.width = aDiv.offsetWidth -1 + "px";
                }, 30);
            }
        </script>
    </head>
    <body>
        <div id="div1">font-size</div>
    </body>
    </html>

    将script改为如下的形式:

        <script type="text/javascript">
    
            window.onload = function () {
                animation();
            }
            function animation(){
    
                var aDiv = document.getElementById("div1");
                setInterval(function(){
                    aDiv.style.width = parseInt(getStyle(aDiv,'width')) -1 + "px";
                }, 30);
            }
    
            //获取样式
            function getStyle(obj,attr){
                if(obj.currentStyle){
                    //针对IE浏览器
                    return obj.currentStyle[attr];
                }else{
                    //针对firefox浏览器
                    return getComputedStyle(obj,false)[attr];
                }
            }
        </script>

    就OK了。

    继续完善函数

    完善后的startMove()函数如下:

            function startMove(obj, attr, iTarget){
                clearInterval(obj.timer);
                var icur = 0;
                obj.timer = setInterval(function () {
                    //如果属性为透明度
                    if(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);
                    if(icur == iTarget){
                        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);

    链式动画

    本例子,是在宽度变化之后,高度再变化,最后才是透明度变化。完善startMove方法,添加一个新的参数,用于回调。

    function startMove(obj, attr, iTarget, fn){
        clearInterval(obj.timer);
        var icur = 0;
        obj.timer = setInterval(function () {
            //如果属性为透明度
            if(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);
            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);
    }

    代码如下:

        <script>
            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);
                        });
                    });
                };
    
            }
    
        </script>

    效果如下:
    这里写图片描述

    同时运动

    改善startMove方法,使其支持同时运动

    function startMove(obj, json, fn){
    
        var flag = true;
        clearInterval(obj.timer);
    
        obj.timer = setInterval(function () {
            for(var attr in json) {
                var icur = 0;
                //如果属性为透明度
                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;
                }else{
                    flag = true;
                }
                //如果属性为透明度
                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>
            window.onload = function () {
                var oLi = document.getElementById('li1');
                oLi.onmouseover = function () {
                    startMove(oLi,{width:400,height:200,opacity:100}, function () {
                        alert('完成');
                    });
    
                }
                oLi.onmouseout = function () {
                    startMove(oLi,{width:200,height:100,opacity:30});
                }
            }
        </script>

    效果如下:
    这里写图片描述

    展开全文
  • js动画效果

    2013-01-26 16:07:41
    js动画效果,可改变大小,位移,透明度,兼容ie和ff,希望和大家共同学习,
  • 主要介绍了JS动画效果打开、关闭层的实现方法,可实现js控制层从中心位置打开与关闭的功能,涉及javascript操作页面元素的相关技巧,需要的朋友可以参考下
  • 常见JS动画效果

    万次阅读 多人点赞 2017-09-27 14:06:15
    人们浏览网页时,若一个网页动画效果丰富炫酷,性能良好,体验度良好,自然会受到吸引去打来浏览。吸引用户,自然少不了网页的布局优美、色彩搭配的恰当,更重要的是其中吸引人的炫酷动画效果

    作为一名前端开发人员,想要的大多都是,在开发过程中,看着自己制作的动画的炫酷以及困难的解决;开发结束后,自己的项目、成果可以被他人认可接受。人们浏览网页时,若一个网页动画效果丰富炫酷,性能良好,体验度良好,自然会受到吸引去打来浏览。吸引用户,自然少不了网页的布局优美、色彩搭配的恰当,更重要的是其中吸引人的炫酷动画效果。
    在这里,我为大家提供几种常用的动画效果,虽然没有什么特别,不是很炫酷,但很常见也很便捷。
    一、轮播图:
    轮播图在网页中运用较广,经常使用于头部banner,使用于电商网站中,例如;淘宝、京东、天猫等购物平台都少不了。而轮播图有多种类型,这次就和大家说说其中的两款。轮播图的原理:点击上一张或下一张时,图片移动的距离为图片本身的宽度;点击图片下的原点导航时跳转到相应的图片位置。
    1、一般的轮播图。这一类型的轮播图,在切换图片的过程中,图片会缓慢的滑动到达相应的位置,即可以看到图片到达相应位置的全过程。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                img{
                    width: 520px;
                }
                div.box{
                    width: 520px;
                    height: 280px;
                    overflow: hidden;
                    margin: 100px auto;
                    position: relative;
                }
                ul.img{
                    top: 0px;
                    left: 0px;
                    width: 1000%;
                    position: absolute;
                }
                ul.img li{
                    float: left;
                    list-style: none;
                }
                ul.circle{
                    left: 50%;
                    bottom: 10px;
                    margin-left: -75px;
                    position: absolute;
                }
                ul.circle li{
                    width: 20px;
                    height: 20px;
                    float: left;
                    color: #666;
                    cursor: pointer;
                    margin: 0px 5px;
                    list-style: none;
                    text-align: center;
                    border-radius: 10px;
                    background: #e4e4e4;
                    font: normal 12px/20px "conslas";
                }
    
                ul.arrow{
                    top: 50%;
                    width: 100%;
                    position: absolute;
                    margin-bottom: -25px;
                }
                ul.arrow li{
                    width: 35px;
                    height: 50px;
                    color: #666;
                    cursor: pointer;
                    list-style: none;
                    text-align: center;
                    background: #ccc;
                    font: 800 30px/50px "conslas";
                }
                ul.arrow li.left{
                    float:left;
                }
                ul.arrow li.right{
                    float: right;
                }
                ul.circle li.current{
                    color:#fff;
                    background: red;
                }
            </style>
        </head>
        <body>
            <div class="box">
                <ul class="img">
                    <li><img src="img/p1.jpg" alt="" /></li>
                    <li><img src="img/p2.jpg" alt="" /></li>
                    <li><img src="img/p3.jpg" alt="" /></li>
                    <li><img src="img/p4.jpg" alt="" /></li>
                    <li><img src="img/p5.jpg" alt="" /></li>
                </ul>
                <ul class="circle">
    
                </ul>
                <ul class="arrow">
                    <li class="left"><</li>
                    <li class="right">></li>
                </ul>
            </div>
    
            <script>
                var box=document.getElementsByTagName("div")[0];//轮播图容器
                var img=box.children[0];//图片容器
                var circle=box.children[1];//小圆点容器
                var arrow=box.children[2];//箭头容器
                var left=arrow.children[0];//左箭头
                var right=arrow.children[1];//右箭头
                var index=0;//当前显示的图片的索引
    
                //需求分析:
                //1、在最后一幅图后面添加第一幅图
                var addImg=img.children[0].cloneNode(true);
                img.appendChild(addImg);
    
                //2、动态添加小圆点,同时点亮第一个
                var circles=img.children;//小圆点的个数即所有图片的个数集合
                for(var i=1;i<circles.length;i++){
                    var circleLi=document.createElement("li");
                    circleLi.innerHTML=i;
                    circle.appendChild(circleLi);
                }
    
                var points=circle.children;
                light();
    
                function light(){
                    for(var i=0;i<points.length;i++){
                        points[i].className="";
                        if(index>4){
                            points[0].className="current";
                        }else{
                            points[index].className="current";
                        }
                    }
                }
                //3、点击小圆点,ul移动到相应的图片,同时点亮小圆点
                for(var j=0;j<points.length;j++){
                    points[j].index=j;
                    points[j].onclick=function(){
                        index=this.index;
                        animate(img,-index*box.offsetWidth);
                        light();
                    }
                }
    
                //4、左右箭头切换图片
              right.onclick=autoplay;
    
              function autoplay(){
                index++;
                if(index>circles.length-1){
                    img.style.left=0;
                    index=1;
                }
                animate(img,-index*box.offsetWidth);
                light();
              }
              left.onclick=function(){
                 index--;
                 if(index<0){
                    img.style.left=-(circles.length-1)*box.offsetWidth+"px";
                    index=circles.length-2;
                 }
                 animate(img,-index*box.offsetWidth);
                 light();
              }
                //5、添加自动轮播功能
               box.timer=setInterval(autoplay,2000);
               box.onmouseover=function(){
                clearInterval(box.timer);
               }
               box.onmouseout=function(){
                clearInterval(box.timer);
                box.timer=setInterval(autoplay,2000);
               }
    
    
                function animate(obj,target){
                    clearInterval(obj.timer);
                    obj.timer=setInterval(function(){
                        var speed=(obj.offsetLeft>target?-20:20);
                        if(Math.abs(obj.offsetLeft-target)>20){
                            obj.style.left=obj.offsetLeft+speed+"px";
                        }else{
                            obj.style.left=target+"px";
                        }
                    },20)
                }
            </script>
        </body>
    </html>
    

    2、无缝轮播图。此类轮播图不会显示图片移动的全过程。

    <!DOCTYPE html>
    <html lang="en">
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                    border: none;
                    list-style: none;
                }
    
                img {
                    width: 310px;
                    height: 220px;
                }
    
                .slider {
                    width: 310px;
                    height: 265px;
                    margin: 100px auto;
                    position: relative;
                    overflow: hidden;
                    cursor: pointer;
                }
    
                .slider-img {
                    width: 310px;
                    height: 220px;
                }
    
                ul {
                    list-style: none;
                }
    
                li {
                    position: absolute;
                    top: 0;
                    left: 0;
                }
    
                .slider-ctrl {
                    text-align: center;
                    padding-top: 10px;
                }
    
                .slider-ctrl-con {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    background: url("img/icon.png") no-repeat -24px -780px;
                    text-indent: -99999px;
                    margin: 0 5px;
                    cursor: pointer;
                }
    
                .slider-ctrl-con.current {
                    background-position: -24px -760px;
                }
    
                .prev,
                .next {
                    position: absolute;
                    top: 40%;
                    width: 30px;
                    height: 35px;
                    background: url("img/icon.png") no-repeat;
                }
    
                .prev {
                    left: 10px;
                }
    
                .next {
                    right: 10px;
                    background-position: 0 -44px;
                }
            </style>
        </head>
    
        <body>
            <div class="slider" id="slider" style="overflow: hidden;">
                <div class="slider-img">
                    <ul>
                        <li>
                            <a href="#"><img src="img/p1.jpg" alt="" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="img/p2.jpg" alt="" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="img/p3.jpg" alt="" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="img/p4.jpg" alt="" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="img/p5.jpg" alt="" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="img/p6.jpg" alt="" /></a>
                        </li>
                    </ul>
                </div>
                <div class="slider-ctrl">
                    <span class="prev" id="prev"></span>
                    <span class="next" id="next"></span>
                </div>
            </div>
            <script type="text/javascript">
                window.onload = function() {
                    var slider = document.getElementById("slider"); //获取元素
                    var ul = document.getElementsByTagName('ul')[0];
                    var lis = ul.children;
                    var per = document.getElementById('prev');
                    var next = document.getElementById('next');
                    var imgWidth = slider.offsetWidth; //获取图片的宽度作为缓动的距离
    
                    for (var i = 0; i < lis.length; i++) { //添加span,用于点击跳转到指定图片
                        var span = document.createElement('span');
                        span.innerHTML = i;
                        span.className = "slider-ctrl-con "; //添加未选中状态
                        per.parentNode.insertBefore(span, per);
                        lis[i].style.left = imgWidth + "px";
                    }
    
                    var num = 0; //标记索引值
                    var span = document.getElementsByTagName('span'); //获取span元素
                    span[0].className += " current"; //为第一个span标签状态设置为选中状态
                    lis[0].style.left = 0 + "px"; //为第一张图片设置显示位置
                    for (var k = 0; k < span.length; k++) {
                        span[k].onclick = function() { //为所有span标签添加点击事件(包括左右按钮)
                            if (this.className == "prev") { //当点击的是向前播放按钮时
                                //要看上一张
                                animation(lis[num], imgWidth); //当前图片缓动到右边位置
                                num = --num < 0 ? lis.length - 1 : num; //索引值设置为前一张图片的索引,当索引值小于0时则等于最后一张的索引
                                lis[num].style.left = -imgWidth + "px"; //将前一张图片瞬间移动到左侧
                                animation(lis[num], 0); //将移动到左侧的图片,缓动到显示位置
                                light(); //点亮底部相应的span标签
                            } else if (this.className == 'next') { //当点击的是向后播放按钮时
                                //要看下一张
                                autoplay(); //按自动播放顺序播放
                            } else {
                                //获取当前被点击的盒子的索引值
                                var index = this.innerHTML;
                                //中间:left = 0;左边:left = -imgWidth+“px";右边:left = +imgWidth+”px“
                                //判断点击的span和当前的图片的索引,谁大谁小
                                if (index > num) { //当点击索引值大于当前播放图片的索引值时
                                    lis[index].style.left = imgWidth + "px"; //该索引值对应的图片瞬间移动到右侧
                                    animation(lis[num], -imgWidth); //当前播放图片缓动到左侧
                                    animation(lis[index], 0); //再缓动至当前播放位置
                                    num = index; //改变索引值
                                    light(); //点亮底部相应的span标签
                                }
                                if (index < num) {
                                    lis[index].style.left = -imgWidth + "px";
                                    animation(lis[num], imgWidth);
                                    animation(lis[index], 0);
                                    num = index;
                                    light();
                                }
                            }
    
                        }
                    }
    
                    function animation(obj, target) { //缓动
                        clearInterval(obj.timer); //为避免多个定时器同时运行带来的bug,在用定时器之前先清理定时器
                        obj.timer = setInterval(function() {
                            var speed = (target - obj.offsetLeft) / 10; 
                            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //为确保能搞达到最终目标值,给speed取整
                            obj.style.left = obj.offsetLeft + speed + "px"; //赋值给当前元素
                            if (target == obj.offsetLeft) { //属性达到目标值时,清理定时器
                                clearInterval(obj.timer);
                            }
                        }, 20);
                    }
    
                    slider.timer = setInterval(function() { //当前无操作时自动播放
                        autoplay();
                    }, 2000);
    
                    slider.onmouseover = function() { //鼠标进入图片区域停止自动播放
                        clearInterval(slider.timer);
                    }
    
                    slider.onmouseout = function() { //鼠标离开图片区域恢复自动播放
                        clearInterval(slider.timer);
                        slider.timer = setInterval(function() {
                            autoplay();
                        }, 2000);
                    }
    
                    function light() {
                        for (var j = 0; j < span.length - 2; j++) {
                            span[j].className = "slider-ctrl-con ";
                        }
                        span[num].className += " current";
                    }
    
                    function autoplay() { //封装自动播放函数
                        animation(lis[num], -imgWidth);
                        num = ++num > lis.length - 1 ? 0 : num;
                        lis[num].style.left = imgWidth + "px";
                        animation(lis[num], 0);
                        light();
                    }
                }
            </script>
        </body>
    
    </html>

    二、旋转木马。顾名思义,旋转木马的动画效果和游乐园中旋转木马类似,因此而得名。旋转木马的原理和轮播图其实差不多,只是旋转木马需要设置每一张图片的z-index属性,且每一张的z-index的设置精准、满意需要一定的经验。

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
    
                .wrap {
                    width: 1200px;
                    margin: 10px auto;
                }
    
                .slider {
                    height: 500px;
                    position: relative;
                }
    
                .slider li {
                    list-style: none;
                    position: absolute;
                    left: 200px;
                    top: 0;
                }
    
                .slider li img {
                    width: 100%;
                    display: block;
                }
    
                .arrow {
                    opacity: 1;
                }
    
                .prev,
                .next {
                    width: 76px;
                    height: 112px;
                    position: absolute;
                    top: 50%;
                    margin-top: -56px;
                    background: url(img/prev.png) no-repeat;
                    z-index: 99;
                }
    
                .next {
                    right: 0;
                    background: url("img/next.png") no-repeat;
                }
    
                .prev {
                    left: 0;
                }
            </style>
        </head>
    
        <body>
            <div class="wrap">
                <div class="slider">
                    <ul>
                        <li><img src="img/1.jpg" /></li>
                        <li><img src="img/2.png" /></li>
                        <li><img src="img/3.jpg" /></li>
                        <li><img src="img/4.jpg" /></li>
                        <li><img src="img/5.jpg" /></li>
                    </ul>
                    <div class="arrow">
                        <div class="prev" id="prev"></div>
                        <div class="next" id='next'></div>
                    </div>
                </div>
            </div>
            <script>
                var json = [{ //  0
                    width: 400,
                    top: 70,
                    left: 50,
                    opacity: 0.2,
                    zIndex: 2
                }, { // 1
                    width: 600,
                    top: 120,
                    left: 0,
                    opacity: 0.8,
                    zIndex: 3
                }, { // 2
                    width: 800,
                    top: 100,
                    left: 200,
                    opacity: 1,
                    zIndex: 4
                }, { // 3
                    width: 600,
                    top: 120,
                    left: 600,
                    opacity: 0.8,
                    zIndex: 3
                }, { //4
                    width: 400,
                    top: 70,
                    left: 750,
                    opacity: 0.2,
                    zIndex: 2
                }];
                //根据json的内容把图片缓动到相应位置,同时缓动
                var liArr = document.getElementsByTagName('li');
                var next = document.getElementById('next');
                var prev = document.getElementById('prev');
    
                function move() {
                    for (var i = 0; i < liArr.length; i++) {
                        animation(liArr[i], json[i]);
                    }
                }
                move()
                next.onclick = function() {
                    var last = json.pop();
                    json.unshift(last);
                    move()
                }
                prev.onclick = function() {
                    var first = json.shift();
                    json.push(first);
                    move();
                }
    
                function animation(obj, json, fn) {
                    clearInterval(obj.timer);
                    obj.timer = setInterval(function() {
                        var flag = true;
                        //json里面有几个属性就要执行几次
                        var target = 0; //记录目标位置
                        var leader = 0; //记录当前位置
                        var speed = 0; //记录速度
                        for (var key in json) {
                            if (key == 'opacity') {
                                target = Math.round(json['opacity'] * 100) //0-100
                                leader = getStyle(obj, 'opacity') * 100 //0-100
                            } else {
                                target = parseInt(json[key]);
                                leader = parseInt(getStyle(obj, key));
                            }
                            speed = (target - leader) / 10;
                            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                            leader = leader + speed; //0-100
                            if (key == 'opacity') {
                                obj.style.opacity = leader / 100;
                                obj.style.filter = "alpha(opacity=" + leader + ")";
                            } else if (key == "zIndex") {
                                obj.style.zIndex = json['zIndex'];
                            } else {
                                obj.style[key] = leader + "px";
                            }
    
                            if (leader != target) {
                                flag = false
                            }
                        }
                        if (flag) {
                            clearInterval(obj.timer);
                            if (fn) {
                                fn();
                            }
                        }
    
                    }, 20)
                }
    
                function getStyle(obj, attr) {
                    if (window.getComputedStyle) {
                        return window.getComputedStyle(obj, null)[attr]
                    } else {
                        return obj.currentStyle[attr];
                    }
                }
            </script>
        </body>
    
    </html>

    三、楼层跳跃。该动画效果也大多使用在电商网站,当点击到相应的标签时就会跳到该位置的内容。例如:当点击淘宝旁的楼层跳跃中的美妆/女装时就会跳到美妆/女装模块。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                html,body{
                    height: 100%;
                }
                ul.nav{
                    position: fixed;
                    top: 80px;
                    left: 20px;
                }
                ul.nav li{
                    width: 70px;
                    height: 40px;
                    color: #fff;
                    cursor: pointer;
                    background: #ccc;
                    text-align: center;
                    line-height: 40px;
                    list-style: none;
                    margin-top: 10px;
                }
                ul.nav .current{
                    background: red;
                }
                ul.content{
                    height: 500%;
                }
                ul.content li{
                    height: 20%;
                    text-align: center;
                    font: 100px/200px "微软雅黑";
                }
            </style>
        </head>
        <body>
            <ul class="nav">
                <li>享品质</li>
                <li>服饰美妆</li>
                <li>家电手机</li>
                <li>电脑数码</li>
                <li>3C运动</li>
            </ul>
            <ul class="content">
                <li>享品质</li>
                <li>服饰美妆</li>
                <li>家电手机</li>
                <li>电脑数码</li>
                <li>3C运动</li>
            </ul>
    
            <script type="text/javascript">
                var color=['skyblue','yellowgreen','pink','cornflowerblue',' #87CEEB'];
                var navlis=document.getElementsByTagName("ul")[0].children;
                var contentlis=document.getElementsByTagName("ul")[1].children;
                for(var i=0;i<color.length;i++){
                    contentlis[i].style.background=color[i];
                }
    
                for(var i=0;i<navlis.length;i++){
                    navlis[i].index=i;
                    navlis[i].onclick=function(){
                        for(var j=0;j<navlis.length;j++){
                            navlis[j].className="";
                        }
                        this.className="current";
    
                        var yPos=this.index*document.body.offsetHeight;
                        clearInterval(window.timer);
                        window.timer=setInterval(function(){
                            var speed=(yPos-scroll().top)/10;
                            speed=speed>0?Math.ceil(speed):Math.floor(speed);
                            window.scrollTo(0,scroll().top+speed);
                            if(scroll().top==yPos){
                                clearInterval(Window.timer);
                            }
                        },30)
                    }
                }
    
                window.onscroll=function(){
                    var num=scroll().top/document.body.offsetHeight;
                    num=Math.ceil(num*2)/2;
                    if(parseInt(num)!=num){
                        num=num-0.5;
                    }
                    for(var j=0;j<navlis.length;j++){
                        navlis[j].className="";
                    }
                    navlis[num].className="current";
                }
    
                function scroll(){
                    return{
                        "top":document.body.scrollTop+document.documentElement.scrollTop,
                        "left":document.body.scrollLeft+document.documentElement.scrollLeft
                    }
                }
            </script>
        </body>
    </html>
    

    四、返回顶部。返回顶部严格来说并不算真正意义上的动画效果,通过锚点就可以实现返回顶部的效果,但此返回顶部效果是滚动条缓慢的回到顶部,这个动画效果几乎在每个网页都可以看到。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                html{
                    height:100%;
                }
                body{
                    height: 600%;
                }
                div{
                    position: fixed;
                    right: 30px;
                    bottom: 20px;
                    display: none;
    
                }
            </style>
        </head>
        <body>
            <div>
                <img src="Top.jpg" />
            </div>
    
            <script type="text/javascript">
                var div=document.getElementsByTagName("div")[0];
                var img=div.children[0];
                window.onscroll=function(){
                    if(scroll().top>100){
                    div.style.display="block";
                }else{
                    div.style.display="none";
                    }
                }
    
                img.onclick=function(){
                    clearInterval(img.timer);
                    img.timer=setInterval(function(){
                        var speed=(0-scroll().top)/10;
                        speed=speed>0?Math.ceil(speed):Math.floor(speed);
                        window.scrollTo(0,scroll().top+speed);
                        if(scroll().top==0){
                            clearInterval(img.timer);
                        }
                    },30)
                }
    
    
                function scroll(){
                    return{
                       "top":document.documentElement.scrollTop+document.body.scrollTop,
                       "left":document.documentElement.scrollLeft+document.body.scrollLeft
                    }
                }
            </script>
        </body>
    </html>
    

    常见的JS动画效果还有许多更炫酷的,以上皆是一些比较普通的,但无论多炫酷的动画效果都是以以上的动画效果的原理为基础,以上动画虽然普通但性能方面没有太大问题。

    展开全文
  • 图片的左右移动,动画效果的实现 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
  • 主要介绍了使用js让图片组成动画,这样就可以用js动画了,大家参考使用吧
  • 前面我们已经介绍了速度动画、透明度动画、多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的动画效果进行进一步扩充,尽量将我们的框架做到更...
  • AngularJS 应用中实现 JavaScript 动画效果 AngularJS 是一组用于创建单页Web应用的丰富框架,给构建丰富交互地应用带来了所有需要的功能。其中一项主要的特性就是Angular带来了对动画的支持。 我们能够在应用的部分...
  • 主要为大家详细介绍了第一篇Javascript动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了第四篇Javascript动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了第二篇Javascript动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • JS动画效果代码3

    2020-10-30 12:17:44
    js实现的动画效果
  • JS动画效果代码2

    2020-10-30 12:17:59
    js实现的图片生成效果代码,学习js的朋友可以看看
  • 九种原生js动画效果

    2020-10-23 08:42:30
    主要介绍了九种原生js动画效果,个个都非常精彩,都值得大家学习,需要的朋友可以参考下
  • javascript动画效果类封装代码
  • 原生js动画效果

    2018-03-27 10:31:03
    原生js动画效果,方便调用,可以链式调用,可以添加多个属性
  • 昨天看到谷歌的主页上出现了几个动画,发现不是flash做的,而是用js+图片实现的!今天把拷贝到的图片,用js实现了动画效果
  • javascript实现打开层和关闭层的效果,原理不错,学习,记录好
  • js模拟弹窗效果代码,用层实现提示效果代码
  • 下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Velocity.js 可用于加速 JavaScript动画效果。类似 jQuery 的 $.animate() 方法,但无需依赖 jQuery。速度非常快,而且提供一些很酷的动画效果,支持 SVG 和滚动。 示例代码: $element.velocity({  width: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 132,773
精华内容 53,109
关键字:

js动画效果