前言
最近比较沉迷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. C#开发PACS医学影像处理系统(十六)：2D处理之影像平移和缩放

    1.平移,利用WPF中控件边距来控制位移: /// <summary> /// 平移图像 /// </summary> /// <param name="X&q ...

  2. Magento中数据拷贝一实现

    Mage_Sales_Model_Quote::setCustomer方法,有这么一行代码 Mage::helper('core')->copyFieldset('customer_accoun ...

  3. ribbon源码之客户端

    客户端模块的核心功能是提供统一的用户请求操作接口. 接口定义 客户端模块的核心是IClient接口,定义了客户端网络请求的方法. public interface IClient<S exten ...

  4. 【Java并发编程】从CPU缓存模型到JMM来理解volatile关键字

    目录 并发编程三大特性 原子性 可见性 有序性 CPU缓存模型是什么 高速缓存为何出现? 缓存一致性问题 如何解决缓存不一致 JMM内存模型是什么 JMM的规定 Java对三大特性的保证 原子性 可见 ...

  5. Volatile禁止指令重排序（三）

    Volatile禁止指令重排 计算机在执行程序时,为了提高性能,编译器和处理器常常会对指令重排,一般分为以下三种: 源代码 -> 编译器优化的重排 -> 指令并行的重排 -> 内存系 ...

  6. vulnhub靶机Os-hackNos-1

    vulnhub靶机Os-hackNos-1 信息搜集 nmap -sP 192.168.114.0/24 找到开放机器192.168.114.140这台机器,再对这台靶机进行端口扫描. 这里对他的端口 ...

  7. 基础篇：详解锁原理，volatile+cas、synchronized的底层实现

    目录 1 锁的分类 2 synchronized底层原理 3 Object的wait和notify方法原理 4 jvm对synchronized的优化 5 CAS的底层原理 6 CAS同步操作的问题 ...

  8. spark textfile rdd 日记

    批量处理模板方法, 核心处理方法为内部方法 def batchProces(sc: SparkContext, locationFlag: Int, minid: Int, maxid: Int, n ...

  9. package.json 非官方字段集合

    package.json 非官方字段集合 package.json 官方字段请参考 https://docs.npmjs.com/files/package.json.下面介绍的是非官方字段,也就是各 ...

  10. Feedforward neural networks前馈神经网络

    Feedforward neural networks or deep feedforward networks or multilayer perceptrons Pass input throug ...