常见JS动画效果
  • 发表于 1天前
  • 阅读 395
  • 收藏 40
  • 点赞 2
  • 评论 1

腾讯云实验室 1小时搭建人工智能应用,让技术更容易入门 免费体验 >>>   

摘要: 作为一名前端开发人员,想要的大多都是,在开发过程中,看着自己制作的动画的炫酷以及困难的解决;开发结束后,自己的项目、成果可以被他人认可接受。人们浏览网页时,若一个网页动画效果丰富炫酷,性能良好,体验度良好,自然会受到吸引去打来浏览。吸引用户,自然少不了网页的布局优美、色彩搭配的恰当,更重要的是其中吸引人的炫酷动画效果。

在这里,我为大家提供几种常用的动画效果,虽然没有什么特别,不是很炫酷,但很常见也很便捷。

一、轮播图: 

轮播图在网页中运用较广,经常使用于头部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="#" alt="" /></li>
                <li><img src="#" alt="" /></li>
                <li><img src="#" alt="" /></li>
                <li><img src="#" alt="" /></li>
                <li><img src="#" 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("/my/sichunchen/blog/1544549/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("/my/sichunchen/blog/1544549/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="#" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="#" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="#" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="#" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="#" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="#" 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(/my/sichunchen/blog/1544549/img/prev.png) no-repeat;
                z-index: 99;
            }

            .next {
                right: 0;
                background: url("/my/sichunchen/blog/1544549/img/next.png") no-repeat;
            }

            .prev {
                left: 0;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <div class="slider">
                <ul>
                    <li><img src="#" /></li>
                    <li><img src="#" /></li>
                    <li><img src="#" /></li>
                    <li><img src="#" /></li>
                    <li><img src="#" /></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="#" />
        </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动画效果还有许多更炫酷的,以上皆是一些比较普通的,但无论多炫酷的动画效果都是以以上的动画效果的原理为基础,以上动画虽然普通但性能方面没有太大问题。

标签: JavaScript
共有 人打赏支持
粉丝 13
博文 25
码字总数 49428
评论 (1)
Mr.Stack
谢谢分享,纯JS代码给了不少启发
×
爱敲代码的程序员
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: