缓动动画、轮播图、移动端网页特效

最新推荐文章于 2022-07-07 13:54:48 发布

添福宝615

最新推荐文章于 2022-07-07 13:54:48 发布

阅读量524

点赞数 1

分类专栏：笔记文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_61923897/article/details/121364205

版权

一、动画函数封装

1、缓动效果原理

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button>点击夏雨荷才走</button>
    <span>夏雨荷</span>
    <script>
        // 缓动动画函数封装obj目标对象 target 目标位置
        // 思路：
        // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
        // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
        // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
        function animate(obj, target) {
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器的里面
                var step = (target - obj.offsetLeft) / 10;
                if (obj.offsetLeft == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15);
        }
        var span = document.querySelector('span');
        var btn = document.querySelector('button');

        btn.addEventListener('click', function() {
                // 调用函数
                animate(span, 500);
            })
            // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <button class="btn500">点击夏雨荷到500</button>
    <button class="btn800">点击夏雨荷到800</button>
    <span>夏雨荷</span>
    <script>
        // 缓动动画函数封装obj目标对象 target 目标位置
        // 思路：
        // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
        // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
        // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
        function animate(obj, target) {
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // 步长值写到定时器的里面
                // 把我们步长值改为整数 不要出现小数的问题
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = (target - obj.offsetLeft) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    // 停止动画 本质是停止定时器
                    clearInterval(obj.timer);
                }
                // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
                obj.style.left = obj.offsetLeft + step + 'px';

            }, 15);
        }
        var span = document.querySelector('span');
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');

        btn500.addEventListener('click', function() {
            // 调用函数
            animate(span, 500);
        })
        btn800.addEventListener('click', function() {
                // 调用函数
                animate(span, 800);
            })
            // 匀速动画 就是 盒子是当前的位置 +  固定的值 10 
            // 缓动动画就是  盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
</head>
<body>
     <button class="btn500">点击TFBOYS到500</button>
    <button class="btn800">点击TFBOYS到800</button>
    <span>TFBOYS</span>

    <script>
        function animate(obj,target,callback){
            // console.log(callback);   callback = function(){}   调用的时候 callback()
           clearInterval(obj.timer);
           obj.timer = setInterval(function(){
               var step = (target - obj.offsetLeft)/10;
               step= step > 0 ? Math.ceil(step) : Math.floor(step);
               if(obj.offsetLeft == target){
                   clearInterval(obj.timer);
                //    回调函数写到定时器结束里面
                if(callback){
                    // 调用函数
                    callback();
                }
               }
               obj.style.left = obj.offsetLeft + step + 'px';

           },15); 
        }
        var btn500 = document.querySelector('.btn500');
        var btn800 = document.querySelector('.btn800');
        var span = document.querySelector('span');
        btn500.addEventListener('click', function(){
            animate(span,500);
        });
        btn800.addEventListener('click', function(){
            animate(span,800,function(){
                // alert('TFBOYS是唯一的存在');
                span.style.backgroundColor = 'orange';
            });
        })
    </script>
</body>
</html>

动画函数的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sliderbar{
            position: fixed;
            right: 0;
            bottom: 100px;
            width: 40px;
            height: 40px;
            color: #fff;
            background-color: darkmagenta;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .con{
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 40px;
            /* color: #fff; */
            /* text-align: center; */
            background-color: darkmagenta;
            z-index: -1;
        }
    </style>
    <script src="./animate.js"></script>
</head>
<body>
    <div class="sliderbar">
        <span>⬅</span>
        <div class="con">问题反馈</div>
    </div>

    <script>
        // 1.获取元素
        var sliderbar = document.querySelector('.sliderbar');
        var con = document.querySelector('.con');

        //当鼠标经过 sliderbar 就会让con这个盒子滑动到左侧
        //当鼠离开过 sliderbar 就会让con这个盒子滑动到右侧
        sliderbar.addEventListener('mouseenter', function(){
            // animate(obj,target,callback);
            animate(con,-160,function(){
                // 当动画执行完毕，就把 ⬅ 改为 ➡
                sliderbar.children[0].innerHTML = '➡';
            });
        })
        sliderbar.addEventListener('mouseleave', function(){
            // animate(obj,target,callback);
            animate(con,0,function(){
                sliderbar.children[0].innerHTML = '⬅';

            });
        })
    </script>
</body>
</html>

案例：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件

最低0.47元/天解锁文章

添福宝615

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
缓动动画、轮播图、移动端网页特效

一、动画函数封装1、缓动效果原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="...
复制链接

扫一扫