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 {
            width: 200px;
            height: 217px;
            background: tomato;
            /* 添加定位 */
            position: absolute;
            /* 默认隐藏 */
            display: none;
        }

        li {
            list-style: none;
            width: 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 {
            width: 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 {
            width: 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 {
            width: 200px;
            height: 200px;
            background: orange;
            position: absolute;
            top: 200px;
            left: 200px;
        }

        .move {
            width: 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>

<head>

<title>Document</title>

<style>

.box1 {

width: 100px;

height: 100px;

position: absolute;

top: 0;

left: 0;

background: blue;

}

</style>

</head>

<body>

　　//获取元素

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 {
            width: 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>

posted on 2021-03-29 21:33 码农小小海阅读(539) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

导航

公告