js高级动画案例----天使移动，移动产生柳絮，拖动盒子，tab切换

最新推荐文章于 2024-08-27 15:59:21 发布

A &......

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量136

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_47531829/article/details/117399696

版权

1.天使随着鼠标移动而移动

    <style>
        img {
            position: absolute;
        }
    </style>
</head>

<body>
    <!-- 天使随鼠标移动而移动 -->
    <img src="images/tianshi.gif" alt="">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove', function() {
            img.style.top = event.clientY - img.height / 2 + 'px';
            img.style.left = event.clientX - img.width / 2 + 'px';
        })
    </script>
</body>

2.移动产生柳絮动画：

    <style>
        div {
            display: none;
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: yellow;
        }
    </style>
</head>

<body style="background-color: black;">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script>
        var div = document.querySelectorAll('div');
        console.log(div.length); //11
        var num = 0;
        setInterval(function() {
            if (num >= div.length) {
                num = 0
            } else {
                document.addEventListener('mousemove', function() {
                    div[num].style.top = event.clientY - div[num].clientHeight + 'px';
                    div[num].style.left = event.clientX - div[num].clientWidth + 'px';
                    div[num].style.display = 'block'
                })
                num++;
            }
        }, 30)
    </script>
</body>

3.拖拉盒子动画：

    <style>
        .big {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: violet;
            border: 1px solid red;
        }
        
        .small {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="small"></div>
    </div>
    <script>
        var big = document.querySelector('.big');
        var small = document.querySelector('.small');
        small.addEventListener('mousedown', function() {
                document.onmousemove = function() {
                    small.style.top = event.clientY - small.clientHeight / 2 + 'px';
                    small.style.left = event.clientX - small.clientWidth / 2 + 'px';
                    //控制中间的小盒子不溢出大盒子
                    //限制小盒子的左右
                    if (event.clientX >= big.clientWidth - small.clientWidth / 2) {
                        small.style.left = big.clientWidth - small.clientWidth + 'px'
                    } else if (event.clientX < small.clientWidth / 2) {
                        small.style.left = 0
                    }
                    //限制小盒子的上下
                    if (event.clientY >= big.clientHeight - small.clientHeight / 2) {
                        small.style.top = big.clientHeight - small.clientHeight + 'px';
                    } else if (event.clientY < small.clientHeight / 2) {
                        small.style.top = 0
                    }
                    console.log(big.clientWidth);
                }
            })
            //鼠标抬起时，将文档的鼠标移动的属性值（函数）设置成空
        document.addEventListener('mouseup', function() {
            document.onmousemove = null;
        })
    </script>
</body>

4.tab切换动画

    <style>
        .top,
        .bottom {
            margin: auto;
            font-size: 20px;
            text-align: center;
        }
        
        .top {
            width: 610px;
            height: 50px;
            margin-bottom: 100px;
            line-height: 50px;
        }
        
        .topContent {
            float: left;
            width: 200px;
            height: 50px;
            border: 1px solid red;
        }
        
        .bottom {
            width: 610px;
            height: 200px;
            line-height: 200px;
        }
        
        .bottomContent {
            display: none;
            width: 610px;
            height: 200px;
            border: 1px solid yellow;
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="topContent">1</div>
        <div class="topContent">2</div>
        <div class="topContent">3</div>
    </div>
    <div class="bottom">
        <div class="bottomContent">1</div>
        <div class="bottomContent">2</div>
        <div class="bottomContent">3</div>
    </div>
    <script>
        var tc = document.querySelectorAll('.topContent');
        var bc = document.querySelectorAll('.bottomContent');
        for (let i = 0; i < tc.length; i++) {
            tc[i].onclick = function() {
                for (var j = 0; j < tc.length; j++) {
                    bc[j].style.display = 'none'
                    tc[j].style.backgroundColor = ''
                }
                bc[i].style.display = 'block';
                this.style.backgroundColor = 'red'
            }
        }
    </script>
</body>

5.js样式计算属性：

   可以获取当前元素所有最终使用的CSS属性值，返回的是一个CSS样式声明对象，语法，【object CSSStyleDeclaration】是一个只读属性

    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        
        div:after {
            content: '';
            width: 20px;
            height: 20px;
            background-color: crimson;
        }
    </style>
</head>

<body>
    <div>
    </div>
    <script>
        var div = document.querySelector('div');
        console.log(window.getComputedStyle(div));
        console.log(window.getComputedStyle(div, ':after').width); //20px
        console.log(window.getComputedStyle(div).backgroundColor); //驼峰命名法

        console.log(div.style.getPropertyValue('background-color')); //不需要驼峰命名法
    </script>
</body>

A &......

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js高级动画案例----天使移动，移动产生柳絮，拖动盒子，tab切换

1.天使随着鼠标移动而移动 <style> img { position: absolute; } </style></head><body>  <img src="images/tianshi.gif" alt=""> <script> var img = docume
复制链接

扫一扫