zoukankan      html  css  js  c++  java
  • 鼠标经过显示 动画

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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="./animate.js"></script>
        <style>
            .sliberbar {
                position: fixed;
                right: 0;
                bottom: 100px;
                 40px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                cursor: pointer;
                color: #fff;
            }
            
            .con {
                position: absolute;
                left: 0;
                top: 0;
                 200px;
                height: 40px;
                background-color: purple;
                z-index: -1;
            }
        </style>
    </head>


    <body>
        <div class="sliberbar">
            <span>←</span>
            <div class="con">问题反馈</div>
        </div>

        <script>
            var sliderbar = document.querySelector('.sliberbar');
            var con = document.querySelector('.con');
            sliderbar.addEventListener('mouseenter', function() {
                animate(con, -160, function() {
                    sliderbar.children[0].innerHTML = '→';
                });
            })
            sliderbar.addEventListener('mouseleave', function() {
                animate(con, 0, function() {
                    sliderbar.children[0].innerHTML = '←';
                });
            })
        </script>
    </body>

    </html>
  • 相关阅读:
    开启power management功能有坑,ESP32串口频繁出现UART_BREAK中断
    ESP32音频开发板ESP32-Korvo V1.1踩坑
    驱动开发常用位运算
    ESP8266 RTOS 开发笔记(4)串口透传
    mosquitto服务状态监控(转载)
    ESP8266 RTOS 开发笔记(3)用户参数
    ESP8266 RTOS 开发笔记(2)TCP Client+Server
    ESP8266 RTOS 开发笔记(1)STA+AP模式(共存)
    C uint32 转 uint8
    python 简易计算器(只能计算加减乘除和括号)
  • 原文地址:https://www.cnblogs.com/ericblog1992/p/13061556.html
Copyright © 2011-2022 走看看