如何利用jquery显示鼠标点页面出现水波纹特效,下面编程教程网小编给大家简单介绍一下具体实现代码!
具体代码如下:
$(document).click(function(e) {
var size = 120
$('body').append("<div class='wave'>")
$('.wave').css({
position: 'fixed',
left: e.clientX,
top: e.clientY,
borderRadius: size + 'px',
border: '1px solid black',
}).stop().animate({
width: size,
height: size,
left: e.clientX - size / 2,
top: e.clientY - size / 2,
opacity: '0'
}, function() {
$('body .wave').remove()
})
})
以上是编程学习网小编为您介绍的“jquery鼠标点页面出现水波纹特效”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。
编程基础网
本文标题为:jquery鼠标点页面出现水波纹特效
基础教程推荐
猜你喜欢
- JavaScript中cookie工具函数封装的示例代码 2024-01-12
- 定时器setTimeout和Promise哪个更好 2025-01-14
- css教程:选择合适的、有意义的元素描述内容 2024-03-09
- vue语法中有哪些内置指令 2025-01-12
- Three.js实现雪糕地球的使用示例详解 2023-12-14
- 标记语言——清单 2023-12-20
- 使用AJAX实现分页 2023-02-01
- el-select的几个点击事件方法介绍 2025-01-13
- HTML clearfix清除浮动讲解 2022-11-23
- 纯CSS实现箭头、气泡让提示功能具有三角形图标 2024-01-17
