前言
最近比较沉迷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. Kafka 【入门一篇文章就够了】

    初识 Kafka 什么是 kafka Kafka 是由 Linkedin 公司开发的,它是一个分布式的,支持多分区.多副本,基于 Zookeeper 的分布式消息流平台,它同时也是一款开源的基于发布订 ...

  2. hadoop和hbase高可用模式部署

    记录apache版本的hadoop和hbase的安装,并启用高可用模式. 1. 主机环境 我这里使用的操作系统是centos 6.5,安装在vmware上,共三台. 主机名 IP 操作系统 用户名 安 ...

  3. 软件工程与UML作业2

    博客班级 https://edu.cnblogs.com/campus/fzzcxy/2018SE1 作业要求 https://edu.cnblogs.com/campus/fzzcxy/2018SE ...

  4. 北京数途科技有限公司--EAM MAXIMO介绍

    一.EAM概述: EAM( Enterprise Asset Management)即企业资产维护管理系统 ,它是面向资产密集型(Asset-intensive)企业的企业信息化 解决方案的总称,其前 ...

  5. Jackson精解第4篇-@JacksonInject与@JsonAlias注解

    Jackson是Spring Boot(SpringBoot)默认的JSON数据处理框架,但是其并不依赖于任何的Spring 库.有的小伙伴以为Jackson只能在Spring框架内使用,其实不是的, ...

  6. 基于bellman-ford算法使用队列优化的spfa求最短路O(m),最坏O(n*m)

    acwing851-spfa求最短路 #include<iostream> #include<cstring> #include<algorithm> #inclu ...

  7. 关于windows服务器的Security安全类日志的导出

    对于windows服务器,日志的分类会有很多,可以通过wevtutil el 列出 有时可能会对Security安全类日志进行审计,这里简单讲一下安全类日志的导出方法 1.直接在cmd中执行 wevt ...

  8. Xmind 2020 破解教程

    前言: 今天用xmind试用版记了会笔记,发现哎哟还真好用,于是乎我脑子一热,点击激活,发现年费好尼玛贵,瞬间我就冷静下来了. 于是乎,脑海里立马浮现出两个字:破解!好了废话不多说,直接上傻瓜教程.( ...

  9. PageObject课程培训记录

    前言 昨晚的培训课程讲了PO设计模式,对于PO模式我们需要去了解关于为什么要使用PO,而不使用PO是什么情况?什么是PO模式?PO怎么去使用? 第一,为什么要使用PO,而不使用PO是什么情况? 我们先 ...

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

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