前言
最近比较沉迷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. 3.Scala语法01 - 基础语法

  2. 2.Kafka-架构

  3. FTP服务端 FTP服务端搭建教程

    FTP服务端搭建教程如下:一.需要准备以下工具:1.微型FTP服务端.2.服务器管理工具二.操作步骤:1.下载微型FTP服务端.(站长工具包可下载:http://zzgjb.iis7.com/ )2. ...

  4. k8s&docker面试总结

    花了大半个月对k8s&docker进行了梳理,包括之前读过的书,官方文档以及k&d在公司项目的实践等. 以下是个人对docker & k8s 面试知识点的总结: 1 docke ...

  5. Java基础一篇过（六）Java8--lambda表达式

    一.简介 lambda表达式是Java8的一个重要特性,也可以称为闭包,常用于配合Java8的Stream对集合元素进行操作,使得代码更简介紧凑. 二.代码解析 虽说lambda表达式是一个新的特性, ...

  6. xss利用——BeEF#stage4（其余功能介绍）

    目录 信息收集 => 社会工程 =>网络扫描 => 结合metasploit => tunneling => xss => 维持权限 功能介绍 #1 - 信息收集 ...

  7. Ubuntu中发生git Connection refused

    今天在提交代码的时候: ssh: connect to host github.com port 22: Connection refused fatal: 无法读取远程仓库. 请确认您有正确的访问权 ...

  8. HashMap,HashSet,HashTable,LinkedHashMap,LinkedHashSet,ArrayList,LinkedList,ConcurrentHashMap,Vector 区别

    ConcurrentHashMap是弱一致性,也就是说遍历过程中其他线程可能对链表结构做了调整,因此get和containsKey返回的可能是过时的数据 ConcurrentHashMap是基于分段锁 ...

  9. 01 C语言基本介绍

    C语言特点 容易上手学习 结构化语言 执行效率高 处理的工作和活动偏底层 可以在多种计算机平台上编译(类似Java的跨平台) C语言历史 目前,C 语言是最广泛使用的系统程序设计语言之一 C 语言是最 ...

  10. C语言编程入门之--第六章C语言控制语句

    导读:本章带读者理解什么是控制语句,然后逐个讲解C语言常用的控制语句,含有控制语句的代码量多起来后就要注意写代码的风格了,本章末节都是练习题,大量的练习才能掌握好控制语句的使用. 6.1 什么是控制语 ...