前言
最近比较沉迷JS,所以我现在来做个鼠标的交互效果
HTML

<div style="border-radius;position:relative;width:800px;height:200px;background:#f7f7f7;display:block;position:fixed;left:35%;top:50%;overflow:hidden;padding:18px" id="AAC">

        <p style="text-align:center;">

            测试鼠标移入

        </p>

</div>

JS

var A = document.querySelectorAll("#AAC")[0];

        A.onmouseenter = function (e) {

            this.innerHTML += ""

            this.innerHTML += '<span style="border-radius:50px;position:absolute;display:block;background: #dcdcdc;width:50px;height:50px;left:' + e.offsetX + 'px;top:' + e.offsetY + 'px"></span>'

        }

        A.onmouseleave = function (e) {

            for (var i = 0; i < document.querySelectorAll("#AAC span").length; i++) {

                document.querySelectorAll("#AAC span")[i].remove();

            }

        }

完整代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        span {

            animation:AAC linear 0.5s;

            animation-fill-mode:forwards;

        }

        @keyframes AAC {

            from {

            }

            to {

                transform:scale(50);

            }

        }

        p {

            color:#3362b3;

            font-size:14px;

            position:absolute;

            z-index:999;

            transition:ease 0.5s;

        }

    </style>

</head>

<body>

    <div style="border-radius;position:relative;width:800px;height:200px;background:#f7f7f7;display:block;position:fixed;left:35%;top:50%;overflow:hidden;padding:18px" id="AAC">

        <p style="text-align:center;">

            测试鼠标移入

        </p>

    </div>

    <script>

        var A = document.querySelectorAll("#AAC")[0];

        A.onmouseenter = function (e) {

            this.innerHTML += ""

            this.innerHTML += '<span style="border-radius:50px;position:absolute;display:block;background: #dcdcdc;width:50px;height:50px;left:' + e.offsetX + 'px;top:' + e.offsetY + 'px"></span>'

        }

        A.onmouseleave = function (e) {

            for (var i = 0; i < document.querySelectorAll("#AAC span").length; i++) {

                document.querySelectorAll("#AAC span")[i].remove();

            }

        }

    </script>

</body>

</html>

效果

后言
本文结束了，如果觉得本技术文章对你有帮助请给我点个赞,如果有什么不足的地方，给我提意见，让我加以改进

JS实现鼠标移入水波效果的更多相关文章

  1. js鼠标移入移出效果【原】

    <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...

  2. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  3. CSS3的过渡效果，使用transition实现鼠标移入/移出效果

    在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬.以前如果要实现过渡,就需要借助第三方的js框架来实现.现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式 ...

  4. JS实现鼠标移入DIV随机变换颜色

    今天分享一个在 JavaScript中,实现一个鼠标移入可以随机变换颜色,本质就是js的随机数运用. 代码如下: <!DOCTYPE html> <html> <head ...

  5. 关于js判断鼠标移入元素的方向--解释

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

  6. 关于js判断鼠标移入元素的方向——上下左右

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

  7. antd card 组件实现鼠标移入移出效果

    鼠标移出: 鼠标移入: import React, { Component } from 'react' import { Card, Icon, Avatar } from 'antd'; cons ...

  8. JS判断鼠标移入元素的方向

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...

  9. jquery+js实现鼠标位移放大镜效果

    jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...

随机推荐

  1. command三国杀开发日记20200915

    一句话进展 完善了程序结构,分离.c和.h 搭建了6个阶段函数 实现了玩家摸牌 封装实现了日志打印函数 日志打印 想要区分日志等级,包括DEBUG.INFO.WARN.ERRRO.PANIC,提供统一 ...

  2. Linux实战（5）：Centos8安装python

    Centos8正式版已经发布了,已经尝鲜的小伙伴们会发现与其他Linux发行版不同,CentOS 8默认不安装Python.接下来的操作指导大家如何安装python3. 转自链接 安装python3 ...

  3. zabbix邮件报警设置(加密)

    邮件设置如下 端口号选择465

  4. redis命令和RedisTemplate操作对应表

    redis命令和RedisTemplate操作对应表 redisTemplate.opsForValue();//操作字符串 redisTemplate.opsForHash();//操作hash r ...

  5. 基本的PID算法整理（水缸的例子有问题！！）

    一,先谈关于水缸漏水的问题 谈到PID原理入门的时候,大家经常会举的一个例子就是水缸漏水的例子.这里把一个解释水缸漏水的帖子放在这里:https://blog.csdn.net/qq_41736609 ...

  6. 二分类问题 - 【老鱼学tensorflow2】

    什么是二分类问题? 二分类问题就是最终的结果只有好或坏这样的一个输出. 比如,这是好的,那是坏的.这个就是二分类的问题. 我们以一个电影评论作为例子来进行.我们对某部电影评论的文字内容为好评和差评. ...

  7. Dubbo工作流程

    一.dubbo整体架构 其中Service 和 Config 层为 API,对应服务提供方来说是使用ServiceConfig来代表一个要发布的服务配置对象,对应服务消费方来说ReferenceCon ...

  8. python中的三大流程

    三大流程又叫程序控制流程 在我们编写代码时,程序是怎么运行的,要用到程序控制流程.在普通代码中,运行的方向是从上到下,从左到右 这就是顺序(逐行扫描). 第二个是分支(又叫选择)结构,例如在编写代码时 ...

  9. Django_项目开始

    如何初始Django运行环境? 1. 安装python 2. 创建Django项目专用的虚拟环境 http://www.cnblogs.com/2bjiujiu/p/7365876.html 3.进入 ...

  10. 设备通讯——RS232

    RS232的接口有两种--一种公头.一种母头,两种头的引脚是有区别的 MAX232电路图: 注意:串口通讯需要交叉接线.