前端开发常见JS动画效果

前端开发概要设计
前端开发 搜索框的设计
前端开发是不是可以代替设计

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

一、轮播图:

轮播图在网页中运用较广,经常使用于头部banner,使用于电商网站中,例如;淘宝、京东、天猫等购物平台都少不了。而轮播图有多种类型,这次就和大家说说其中的两款。轮播图的原理:点击上一张或下一张时,图片移动的距离为图片本身的宽度;点击图片下的原点导航时跳转到相应的图片位置。

1、一般的轮播图。这一类型的轮播图,在切换图片的过程中,图片会缓慢的滑动到达相应的位置,即可以看到图片到达相应位置的全过程。

html 代码

<!DOCTYPE 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、无缝轮播图。此类轮播图不会显示图片移动的全过程。

html 代码

<!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的设置精准、满意需要一定的经验。

html 代码

<!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>

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

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>

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

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

产品设计 前端开发
前端开发 室内设计
web前端开发毕业设计题目
» 本文来自:前端开发者 » 《前端开发常见JS动画效果》
» 本文链接地址:https://www.rokub.com/8008.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!