jQuery點擊水波動畫垂直導覽列代碼

js程式碼

<腳本類型="text/javascript" src="js/jquery.min.js"></script>
<腳本類型=“text/javascript”>
//jQuery時間
var 父級、ink、d、x、y；
$(".nav ul li a").click(function(e){
父 = $(this).parent();
//如果.ink元素不存在則建立它
if(parent.find(".ink").length == 0)
parent.prepend("");

ink =parent.find(".ink");
//如果快速雙擊則停止上一個動畫
ink.removeClass(“動畫”);

//設定.ink的大小
if(!ink.height() && !ink.width())
{
//使用父級的寬度或高度中較大的直徑來製作一個可以覆蓋整個元素的圓。
d = Math.max(parent.outerWidth(),parent.outerHeight());
ink.css({高度: d, 寬度: d});
}

//取得點擊座標
//logic = 點擊相對於頁面的座標 - 父級相對於頁面的位置 - 自身高度/寬度的一半，使其可以從中心控制；
x = e.pageX - Parent.offset().left - ink.width()/2;
y = e.pageY - Parent.offset().top - ink.height()/2;

//設定位置並新增類別.animate
ink.css({上: y+'px', 左邊: x+'px'}).addClass("animate");
})
</劇本>

一款簡潔漂亮的基於jQuery+CSS3實現的帶有水波動畫效果的垂直導航列代碼，滑鼠點擊導航選單連結出現水波動畫效果。