• javaScript系列---【js动画特效--案例汇总】

    案例1:自定义右击菜单

    <!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>
        * {
            margin: 0;
            padding: 0;
        }

        #menu {
             200px;
            height: 217px;
            background: tomato;
            /* 添加定位 */
            position: absolute;
            /* 默认隐藏 */
            display: none;
        }

        li {
            list-style: none;
             200px;
            height: 30px;
            border-bottom: 1px solid white;
        }

        li:hover {
            background: skyblue;
        }

        body {
            height: 2000px;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>Node.js</li>
            <li>Vue</li>
            <li>React</li>
            <li>小程序</li>
        </ul>
    </div>
    <script>
        var menu = document.getElementById('menu');
        // 右击事件,取消默认事件
        document.oncontextmenu = function (e) {
            // 获取鼠标的位置, 赋值给菜单的定位
            e = e || window.event;
            // console.log(e.clientX, e.clientY); // 相对于可视区
            // console.log(e.pageX, e.pageY); // 相对于页面
            menu.style.left = e.pageX + 'px';
            menu.style.top = e.pageY + 'px';
            // 让自定义菜单显示
            menu.style.display = 'block';
            // 取消默认事件(默认的右击菜单不显示)
            return false;
        }
        // 点击页面,隐藏自定义菜单
        document.onclick = function () {
            menu.style.display = 'none';
        }
    </script>
</body>
</html>

    案例2:键盘控制元素移动

    <!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 {
             100px;
            height: 100px;
            background: tomato;
            position: absolute;
            top: 300px;
            left: 300px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box');
        // 获取box的位置
        var l = parseInt(getStyle(box, 'left'));
        var t = parseInt(getStyle(box, 'top'));
        // console.log(l, t);
        // 监听键盘的按下
        document.onkeydown = function (e) {
            e = e || window.event;
            // console.log(e.keyCode);
            switch (e.keyCode) {
                case 37:
                    l--;
                    break;
                case 38:
                    t--;
                    break;
                case 39:
                    l++;
                    break;
                case 40:
                    t++;
                    break;
            }
            // 赋值
            box.style.left = l + 'px';
            box.style.top = t + 'px';
        }

        // 获取经过浏览器渲染的样式 （行内样式  内部样式 外部样式）
        function getStyle(ele, attr) {
            return window.getComputedStyle ? window.getComputedStyle(ele)[attr] : ele.currentStyle[attr];
        }
    </script>
</body>
</html>

    案例3:根据滚轮控制元素大小

    <body>
    <div class="box"></div>
    
    <script>
        var box = document.querySelector('.box'); 
        var h = 300; // box的高度
        // Chrome
        box.onmousewheel = wheel;
        // firefox
        box.addEventListener('DOMMouseScroll', wheel);
        function wheel(e) {
            var direction; // 表示方向 1表示向下  -1表示向上
            e = e || window.event;
            if (e.wheelDelta) { // chrome
                if (e.wheelDelta > 0) {
                    // console.log('chrome--up');
                    direction = -1;
                } else {
                    // console.log('chrome--down');
                    direction = 1;
                }
            } else { // firefox
                if (e.detail > 0) {
                    // console.log('firefox--down');
                    direction = 1;
                } else {
                    // console.log('firefox--up');
                    direction = -1;
                }
            }
            // 根据方向修改box的大小
            h += direction;
            box.style.height = h + 'px';
        }
    </script>
</body>

    案例4:拖拽元素

    <!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 {
             200px;
            height: 200px;
            background: tomato;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <div class="box">box</div>
    <div class="box1">box1</div>
    <script>
        var box = document.querySelector('.box');
        var box1 = document.querySelector('.box1');
        drag(box);
        drag(box1);
        function drag(ele) {
            // 鼠标在box上按下
            ele.onmousedown = function (e) {
                e = e || window.event;
                // 按下瞬间,计算误差
                var deltaX = e.clientX - ele.offsetLeft;
                var deltaY = e.clientY - ele.offsetTop;
                // console.log(deltaX, deltaY);

                // 鼠标在页面上移动
                document.onmousemove = function (e) {
                    e = e || window.event;
                    // console.log(e.clientX, e.clientY);
                    // 计算当前的位置
                    var l = e.clientX - deltaX;
                    var t = e.clientY - deltaY;

                    // 验收,限制范围
                    if (l <= 0) l = 0;
                    if (t <= 0) t = 0;
                    // 获取屏幕的宽高
                    var screenW = document.documentElement.clientWidth;
                    var screenH = document.documentElement.clientHeight;
                    if (l >= screenW - ele.offsetWidth) l = screenW - ele.offsetWidth;
                    if (t >= screenH - ele.offsetHeight) t = screenH - ele.offsetHeight;

                    // 赋值
                    ele.style.left = l + 'px';
                    ele.style.top = t + 'px';
                }
            }

            // 鼠标抬起, 取消移动事件
            document.onmouseup = function () {
                document.onmousemove = null;
            }
        }
    </script>
</body>

</html>

    案例5:碰撞检测

    <!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>
        .box {
             200px;
            height: 200px;
            background: orange;
            position: absolute;
            top: 200px;
            left: 200px;
        }

        .move {
             100px;
            height: 100px;
            background: orange;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">box</div>
    <div class="move">move</div>

    <script>

        var box = document.querySelector('.box');
        var move = document.querySelector('.move');

        // 鼠标在box上按下
        move.onmousedown = function (e) {
            e = e || window.event;
            // 按下瞬间,计算误差
            var deltaX = e.clientX - move.offsetLeft;
            var deltaY = e.clientY - move.offsetTop;

            // 鼠标在页面上移动
            document.onmousemove = function (e) {
                e = e || window.event;

                // 计算当前的位置
                var l = e.clientX - deltaX;
                var t = e.clientY - deltaY;

                // 验收,限制范围
                if (l <= 0) l = 0;
                if (t <= 0) t = 0;
                // 获取屏幕的宽高
                var screenW = document.documentElement.clientWidth;
                var screenH = document.documentElement.clientHeight;
                if (l >= screenW - move.offsetWidth) l = screenW - move.offsetWidth;
                if (t >= screenH - move.offsetHeight) t = screenH - move.offsetHeight;
                // 赋值,移动
                move.style.left = l + 'px';
                move.style.top = t + 'px';

                // 移动的过程中进行判断碰撞
                if (move.offsetLeft + move.offsetWidth >= box.offsetLeft && move.offsetTop + move.offsetHeight >= box.offsetTop && box.offsetLeft + box.offsetWidth >= move.offsetLeft && box.offsetTop + box.offsetHeight >= move.offsetTop) {
                    move.style.background = 'blue';
                } else {
                    move.style.background = 'orange';
                }
            }
            return false;
        }

        // 鼠标抬起, 取消移动事件
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    </script>
</body>

</html>

    案例6:改变元素多个任意属性(透明度 左/右等属性)

    <!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>
            .box1 {
                 100px;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;
                background: blue;
            }
        </style>
    </head>

    <body>
        <div class="box1"></div>
        <script>
    　　//获取元素
        var box1 = document.querySelector('.box1');
        box1.onclick = function () {
          bufferMove(box1, { 'left': 500, 'top': 100 });
        }

       // 缓冲运动函数
       // ele: 元素 targetJson: 目标json值 
       // 约定opacity在传参时手动放大100倍
        function bufferMove(ele, targetJson) {
       // 清除定时器
        clearInterval(ele.timer);
       // 把定时器作为自定属性绑定在元素上,多个不同元素之间不会相互影响
        ele.timer = setInterval(function () {

       // 假定已经到了终点(声明变量为true), 在forin中每次走完一步, 对当前位置进行判断, 如果有任         意属性未到终点(变量变为false), 直到有一次全部都到达终点, 变量在forin执行完毕后仍为true,         停止定时器
          var tag = true;
          // 遍历targetJson
          for (var attr in targetJson) {
          if (attr == 'opacity') {
          // 获取元素当前透明度(放大100倍)
          var nowattr = parseInt(getStyle(ele, attr) * 100);
          } else {
           var nowattr = parseInt(getStyle(ele, attr));
                        }
          // 计算步长: (目标值-当前值)/比例 
           var step = (targetJson[attr] - nowattr) / 10;
           // 对步长进行判断,如果是正方向运行向上取整,如果是负方向运行向下取整
           step = step > 0 ? Math.ceil(step) : Math.floor(step);
           // console.log(step);
           // 加上步长
           nowattr += step;
                    
           // 赋值
           if (attr == 'opacity') {
           // 赋值(透明度缩小100倍)
           ele.style[attr] = nowattr / 100;
           } else {　　
                 ele.style[attr] = nowattr + 'px';
             }

             // 有属性未到终点,变量变成false
             if (nowattr != targetJson[attr]) {
             tag = false;
            }
          }

             // 如果forin执行完毕tag仍未true,表示全部到达终点
               if (tag) {
               clearInterval(ele.timer);
              }
             }, 50);
            }
            // 获取计算后样式
            function getStyle(ele, attr) {
                return window.getComputedStyle ? window.getComputedStyle(ele)[attr] : el              e.currentStyle[attr];
            }
        </script>
    </body>

    </html>

     案例7:运动函数添加回调函数

    <!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>
        .box1 {
             100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            background: blue;
        }
    </style>
</head>

<body>
    <div class="box1"></div>

    <script src="../ujiuye.js"></script>
    <script>
        var box1 = document.querySelector('.box1');
        box1.onclick = function () {
            bufferMove(box1, { 'left': 500, 'top': 1 }, function () {
                box1.style.background = 'pink';
            });
        }
    </script>
</body>

</html>
  • 相关阅读:
    小白月赛4 A 三角形
    小白月赛4 A 三角形
    Trouble HDU
    Trouble HDU
    K
    K
    2016年第七届蓝桥杯C/C++ A组国赛 —— 第一题：随意组合
    2016年第七届蓝桥杯C/C++ B组国赛 —— 第一题：一步之遥
    2016年第七届蓝桥杯C/C++ B组国赛 —— 第一题：一步之遥
    Koch Curve Aizu
  • 原文地址：https://www.cnblogs.com/chenhaiyun/p/14594418.html
Copyright © 2020-2023  润新知