前言
最近比较沉迷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. 万字详解TDengine 2.0整体架构设计思路

    ​导读:涛思数据8月3日将TDengine 的集群功能开源,TDengine具有超强的性能和功能,为什么能做到?它到底有哪些技术创新?今将TDengine的整体设计文档分享出来. 1: 数据模型 物联 ...

  2. nginx实战（1）：宝塔设置反向代理

    以下操作适用于默认80端口转其他地址非80端口情况. 添加网站 注意:因我只是拿来当反向代理来使用,所PHP为纯静态模式. 开启反向代理 注:目标URL为最终目的地,发送域名为默认,如设置后无效则修改 ...

  3. SQL中只要用到聚合函数就一定要用到group by 吗？

    1.当聚集函数和非聚集函数出现在一起时,需要将非聚集函数进行group by2.当只做聚集函数查询时候,就不需要进行分组了.

  4. Spring循环依赖的三种方式

    ​ 引言:循环依赖就是N个类中循环嵌套引用,如果在日常开发中我们用new 对象的方式发生这种循环依赖的话程序会在运行时一直循环调用,直至内存溢出报错.下面说一下Spring是如果解决循环依赖的. 第一 ...

  5. PHP:文件包含漏洞

    简单记录一些文件包含漏洞的常用方法 产生原因: 文件包含漏洞的产生原因是在通过引入文件时,由于传入的文件名没有经过合理的校验,或者校检被绕过,从而操作了预想之外的文件,就可能导致意外的文件泄露甚至恶意 ...

  6. Kafka 【的这些原理你知道吗】

    如果只是为了开发 Kafka 应用程序,或者只是在生产环境使用 Kafka,那么了解 Kafka 的内部工作原理不是必须的.不过,了解 Kafka 的内部工作原理有助于理解 Kafka 的行为,也利用 ...

  7. Android捕捉错误try catch 的简单使用

    基本语法 try{ //可能发生错误的程式码 }catch(具体错误 e){ //具体错误有就写,没有就不写,有多个,就写多个catch e.printStackTrace(); //在命令行打印错误 ...

  8. Harmony OS 开发避坑指南——DevEco Device Tool 安装配置

    Harmony OS 开发指南--DevEco Device Tool 安装配置 本文介绍如何在Windows主机上安装DevEco Device Tool工具. 坑点总结: 国内部分网络环境下,安装 ...

  9. requests和正则表达式爬取猫眼电影Top100练习

    1 import requests 2 import re 3 from multiprocessing import Pool 4 from requests.exceptions import R ...

  10. 032 01 Android 零基础入门 01 Java基础语法 03 Java运算符 12 运算符和if-else条件语句的综合案例——闰年问题

    032 01 Android 零基础入门 01 Java基础语法 03 Java运算符 12 运算符和if-else条件语句的综合案例--闰年问题 本文知识点:运算符和if-else条件语句的综合案例 ...