<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JS</title> <link type="text/css" href="https://www.jb51.net/css/reset.css" /> <script type="text/javascript" src=""></script> <style type="text/css" media="screen"> ul { font-size: 0; position: relative; padding: 0; width: 480px; margin: 40px auto; user-select: none; } li { display: inline-block; width: 160px; height: 60px; background: #E95546; font-size: 16px; text-align: center; line-height: 60px; color: white; text-transform: uppercase; position: relative; overflow: hidden; cursor: pointer; } .slider { display: block; position: absolute; bottom: 0; left: 0; height: 4px; background: #1685D3; transition: all 0.5s; } .ripple { width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.4); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); position: absolute; opacity: 1; } .rippleEffect { -webkit-animation: rippleDrop .4s linear; animation: rippleDrop .4s linear; } @-webkit-keyframes rippleDrop { 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes rippleDrop { 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } </style> </head> <body> <ul> <li>项目一</li> <li>项目二</li> <li>项目三</li> <li></li> </ul> </body> <script> $("ul li").click(function(e) { if($(this).hasClass('slider')) { return; } var whatTab = $(this).index(); var howFar = 160 * whatTab; $(".slider").css({ left: howFar + "px" }); $(".ripple").remove(); var posX = $(this).offset().left, posY = $(this).offset().top, buttonWidth = $(this).width(), buttonHeight = $(this).height(); console.log(posX, posY, buttonWidth, buttonHeight) $(this).append("<span></span>"); if(buttonWidth >= buttonHeight) { buttonHeight = buttonWidth; } else { buttonWidth = buttonHeight; } var x = e.pageX - posX - buttonWidth / 2; var y = e.pageY - posY - buttonHeight / 2; $(".ripple").css({ width: buttonWidth, height: buttonHeight, top: y + 'px', left: x + 'px' }).addClass("rippleEffect"); }); </script> </html>
您可能感兴趣的文章: