JS实现鼠标移入水波效果

前言
最近比较沉迷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>

 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>

效果
在这里插入图片描述

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

2019-06-18 11:31 LRolinx 阅读(241) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

Loading

LRolinx

JS实现鼠标移入水波效果

公告

搜索

常用链接

我的标签

随笔档案

阅读排行榜

推荐排行榜

	<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>

	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>