jquery如何实现鼠标点击页面出现水波纹效果

716 ℃

jquery如何实现鼠标点击页面出现水波纹效果,引入jquery,代码放到js里面,鼠标点击页面!

具体代码如下:

$('body').css('background', '#fc770a')
$(document).click(function(e) {
  var size = 100//自定义大小
  $('body').append("<div class='ripple'>")
  $('.ripple').css({
    //点击后执行样式
    position: 'fixed',
    left: e.clientX,
    top: e.clientY,
    borderRadius: size + 'px',
    border: '1px solid #ffd739',
  }).stop().animate({//停止频繁点击
    width: size,
    height: size,
    left: e.clientX - size / 2,
    top: e.clientY - size / 2,
    opacity: '0'
  }, function() {
    //执行完成后删掉
    $('body .ripple').remove()
  })
})

简单介绍关于jquery的所有遍历方法

jquery关于交互的几种方式

jquery触发事件focus的运用

jquery判断标签中是否包含某属性

vue项目开发如何引入jquery

标签: jquery, 水波纹效果

上面是“jquery如何实现鼠标点击页面出现水波纹效果”的全面内容,想了解更多关于 js 内容,请继续关注web建站教程。

当前网址:https://m.ipkd.cn/webs_3241.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

如何让你的网站更容易搜索?
wordpress调用全站热门文章(代码介绍)
wordpress如何判断路径是否为可写
history相关属性
wordpress建站:怎么利用get_template_part加载模板模块文件