jquery鼠标点页面出现水波纹特效

如何利用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鼠标点页面出现水波纹特效

基础教程推荐