jQuery鼠标点击水波动画竖直导航代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标点击水波动画竖直导航代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery鼠标点击水波动画竖直导航代码</title>

<!--可无视-->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<script type="text/javascript" src="js/prefixfree.min.js"></script>

<!--主要样式-->
<style type="text/css">
* {margin: 0; padding: 0;}
/*nav styles*/
.nav ul {
	background: white; border-top: 6px solid hsl(180, 40%, 60%);
	width: 200px; margin: 5em auto;
}
.nav ul li {
	list-style-type: none;
	/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
	position: relative;
	overflow: hidden;
}
.nav ul li a {
	font: normal 14px/28px Montserrat; 
	color: hsl(180, 40%, 40%);
	display: block; 
	padding: 10px 15px;
	text-decoration: none;
	cursor: pointer; /*since the links are dummy without href values*/
	/*prevent text selection*/
	user-select: none;
	/*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
	position: relative;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.nav .ink {
	display: block; 
	position: absolute;
	background: hsl(180, 40%, 80%);
	border-radius: 100%;
	transform: scale(0);
}
/*animation effect*/
.nav .ink.animate {animation: ripple 0.65s linear;}
@keyframes ripple {
	/*scale the element to 250% to safely cover the entire link and fade it out*/
	100% {opacity: 0; transform: scale(2.5);}
}
</style>

<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

</head>
<body style="background:#D1EFFE;">

<div class="nav">
	<ul>
		<li><a>网站首页</a></li>
		<li><a>关于我们</a></li>
		<li><a>产品中心</a></li>
		<li><a>成功案例</a></li>
		<li><a>联系我们</a></li>
		<li><a>在线留言</a></li>
	</ul>
</div>

<script  type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//jQuery time
var parent, ink, d, x, y;
$(".nav ul li a").click(function(e){
	parent = $(this).parent();
	//create .ink element if it doesn't exist
	if(parent.find(".ink").length == 0)
		parent.prepend("<span class='ink'></span>");
		
	ink = parent.find(".ink");
	//incase of quick double clicks stop the previous animation
	ink.removeClass("animate");
	
	//set size of .ink
	if(!ink.height() && !ink.width())
	{
		//use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
		d = Math.max(parent.outerWidth(), parent.outerHeight());
		ink.css({height: d, width: d});
	}
	
	//get click coordinates
	//logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
	x = e.pageX - parent.offset().left - ink.width()/2;
	y = e.pageY - parent.offset().top - ink.height()/2;
	
	//set the position and add class .animate
	ink.css({top: y+'px', left: x+'px'}).addClass("animate");
})
</script>
</body>
</html>

JS代码(prefixfree.min.js):

!function(){
	function e(e,r){
	return[].slice.call((r||document).querySelectorAll(e))}
if(window.addEventListener){
	var r=window.StyleFix={
	link:function(e){
	try{
	if("stylesheet"!==e.rel||e.hasAttribute("data-noprefix"))return}
catch(t){
	return}
var n,i=e.href||e.getAttribute("data-href"),a=i.replace(/[^\/]+$/,""),o=(/^[a-z]{
	3,10}
:/.exec(a)||[""])[0],s=(/^[a-z]{
	3,10}
:\/\/[^\/]+/.exec(a)||[""])[0],l=/^([^?]*)\??/.exec(i)[1],u=e.parentNode,p=new XMLHttpRequest;
	p.onreadystatechange=function(){
	4===p.readyState&&n()}
,n=function(){
	var t=p.responseText;
	if(t&&e.parentNode&&(!p.status||p.status<400||p.status>600)){
	if(t=r.fix(t,!0,e),a){
	t=t.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,r,t){
	return/^([a-z]{
	3,10}
:|#)/i.test(t)?e:/^\/\//.test(t)?'url("'+o+t+'")':/^\//.test(t)?'url("'+s+t+'")':/^\?/.test(t)?'url("'+l+t+'")':'url("'+a+t+'")'}
);
	var n=a.replace(/([\\\^\$*+[\]?{
}
.=!:(|)])/g,"\\$1");
	t=t.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+n,"gi"),"$1")}
var i=document.createElement("style");
	i.textContent=t,i.media=e.media,i.disabled=e.disabled,i.setAttribute("data-href",e.getAttribute("href")),u.insertBefore(i,e),u.removeChild(e),i.media=e.media}
}
;
	try{
	p.open("GET",i),p.send(null)}
catch(t){
	"undefined"!=typeof XDomainRequest&&(p=new XDomainRequest,p.onerror=p.onprogress=function(){
}
,p.onload=n,p.open("GET",i),p.send(null))}
e.setAttribute("data-inprogress","")}
,styleElement:function(e){
	if(!e.hasAttribute("data-noprefix")){
	var t=e.disabled;
	e.textContent=r.fix(e.textContent,!0,e),e.disabled=t}
}
,styleAttribute:function(e){
	var t=e.getAttribute("style");
	t=r.fix(t,!1,e),e.setAttribute("style",t)}
,process:function(){
	e("style").forEach(StyleFix.styleElement),e("[style]").forEach(StyleFix.styleAttribute)}
,register:function(e,t){
	(r.fixers=r.fixers||[]).splice(void 0===t?r.fixers.length:t,0,e)}
,fix:function(e,t,n){
	for(var i=0;
	i<r.fixers.length;
	i++)e=r.fixers[i](e,t,n)||e;
	return e}
,camelCase:function(e){
	return e.replace(/-([a-z])/g,function(e,r){
	return r.toUpperCase()}
).replace("-","")}
,deCamelCase:function(e){
	return e.replace(/[A-Z]/g,function(e){
	return"-"+e.toLowerCase()}
)}
}
;
	!function(){
	setTimeout(function(){
}
,10),document.addEventListener("DOMContentLoaded",StyleFix.process,!1)}
()}
}
(),function(e){
	function r(e,r,n,i,a){
	if(e=t[e],e.length){
	var o=RegExp(r+"("+e.join("|")+")"+n,"gi");
	a=a.replace(o,i)}
return a}
if(window.StyleFix&&window.getComputedStyle){
	var t=window.PrefixFree={
	prefixCSS:function(e,n){
	var i=t.prefix;
	if(t.functions.indexOf("linear-gradient")>-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/gi,function(e,r,t,n){
	return r+(t||"")+"linear-gradient("+(90-n)+"deg"}
)),e=r("functions","(\\s|:|,)","\\s*\\(","$1"+i+"$2(",e),e=r("keywords","(\\s|:)","(\\s|;
	|\\}
|$)","$1"+i+"$2$3",e),e=r("properties","(^|\\{
	|\\s|;
	)","\\s*:","$1"+i+"$2:",e),t.properties.length){
	var a=RegExp("\\b("+t.properties.join("|")+")(?!:)","gi");
	e=r("valueProperties","\\b",":(.+?);
	",function(e){
	return e.replace(a,i+"$1")}
,e)}
return n&&(e=r("selectors","","\\b",t.prefixSelector,e),e=r("atrules","@","\\b","@"+i+"$1",e)),e=e.replace(RegExp("-"+i,"g"),"-"),e=e.replace(/-\*-(?=[a-z]+)/gi,t.prefix)}
,property:function(e){
	return(t.properties.indexOf(e)?t.prefix:"")+e}
,value:function(e){
	return e=r("functions","(^|\\s|,)","\\s*\\(","$1"+t.prefix+"$2(",e),e=r("keywords","(^|\\s)","(\\s|$)","$1"+t.prefix+"$2$3",e)}
,prefixSelector:function(e){
	return e.replace(/^:{
	1,2}
/,function(e){
	return e+t.prefix}
)}
,prefixProperty:function(e,r){
	var n=t.prefix+e;
	return r?StyleFix.camelCase(n):n}
}
;
	!function(){
	var e={
}
,r=[],n=getComputedStyle(document.documentElement,null),i=document.createElement("div").style,a=function(t){
	if("-"===t.charAt(0)){
	r.push(t);
	var n=t.split("-"),i=n[1];
	for(e[i]=++e[i]||1;
	n.length>3;
	){
	n.pop();
	var a=n.join("-");
	o(a)&&-1===r.indexOf(a)&&r.push(a)}
}
}
,o=function(e){
	return StyleFix.camelCase(e)in i}
;
	if(n.length>0)for(var s=0;
	s<n.length;
	s++)a(n[s]);
	else for(var l in n)a(StyleFix.deCamelCase(l));
	var u={
	uses:0}
;
	for(var p in e){
	var f=e[p];
	u.uses<f&&(u={
	prefix:p,uses:f}
)}
t.prefix="-"+u.prefix+"-",t.Prefix=StyleFix.camelCase(t.prefix),t.properties=[];
	for(var s=0;
	s<r.length;
	s++){
	var l=r[s];
	if(0===l.indexOf(t.prefix)){
	var c=l.slice(t.prefix.length);
	o(c)||t.properties.push(c)}
}
"Ms"!=t.Prefix||"transform"in i||"MsTransform"in i||!("msTransform"in i)||t.properties.push("transform","transform-origin"),t.properties.sort()}
(),function(){
	function e(e,r){
	return i[r]="",i[r]=e,!!i[r]}
var r={
	"linear-gradient":{
	property:"backgroundImage",params:"red,teal"}
,calc:{
	property:"width",params:"1px + 5%"}
,element:{
	property:"backgroundImage",params:"#foo"}
,"cross-fade":{
	property:"backgroundImage",params:"url(a.png),url(b.png),50%"}
}
;
	r["repeating-linear-gradient"]=r["repeating-radial-gradient"]=r["radial-gradient"]=r["linear-gradient"];
	var n={
	initial:"color","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display",grid:"display","inline-grid":"display","min-content":"width"}
;
	t.functions=[],t.keywords=[];
	var i=document.createElement("div").style;
	for(var a in r){
	var o=r[a],s=o.property,l=a+"("+o.params+")";
	!e(l,s)&&e(t.prefix+l,s)&&t.functions.push(a)}
for(var u in n){
	var s=n[u];
	!e(u,s)&&e(t.prefix+u,s)&&t.keywords.push(u)}
}
(),function(){
	function r(e){
	return a.textContent=e+"{
}
",!!a.sheet.cssRules.length}
var n={
	":read-only":null,":read-write":null,":any-link":null,"::selection":null}
,i={
	keyframes:"name",viewport:null,document:'regexp(".")'}
;
	t.selectors=[],t.atrules=[];
	var a=e.appendChild(document.createElement("style"));
	for(var o in n){
	var s=o+(n[o]?"("+n[o]+")":"");
	!r(s)&&r(t.prefixSelector(s))&&t.selectors.push(o)}
for(var l in i){
	var s=l+" "+(i[l]||"");
	!r("@"+s)&&r("@"+t.prefix+s)&&t.atrules.push(l)}
e.removeChild(a)}
(),t.valueProperties=["transition","transition-property"],e.className+=" "+t.prefix,StyleFix.register(t.prefixCSS)}
}
(document.documentElement);

CSS代码(normalize.css):

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}

附件:下载该文件资源,减少时间成本(增值服务)