水波块切换选项导航栏

最新推荐文章于 2022-05-10 17:35:16 发布

weihe_7306

最新推荐文章于 2022-05-10 17:35:16 发布

阅读量96

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/weixin_43360488/article/details/105909450

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="waterTab.css"/>
		<script type="text/javascript" src="jquery-2.1.0.js">
			
		</script>
		<script type="text/javascript" src="waterTab.js">
			
		</script>
	</head>
	<body>
		<ul>
			<li>Tab one</li>
			<li>Tab two</li>
			<li>Tab Three</li>
			<li class="slider"></li>
		</ul>
	</body>
</html>

css代码:

user-select属性：html中可能有些地方不想让用户复制文字，或是用a标签做了个点击按钮，点快的时候文字会被选中，很丑，这个时候可以使用下面的方案禁止文字选中。
 ul {
	font-size:0;
	padding:0;
	position:relative;
	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:#fff;
	text-transform:uppercase;
	position:relative;
	overflow:hidden;
	cursor:pointer;
}
.slider {
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	height:4px;
	background:#4FC2E5;
	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:ripple .4s linear;
	animation:ripple .4s linear;
}
/*扩大两倍,但是外面看不见,然后在变为0*/
@-webkit-keyframes 
	  ripple {
	100% {
	-webkit-transform:scale(2);
	transform:scale(2);
	opacity:0;
}
}@keyframes 
	  ripple {
	100% {
	-webkit-transform:scale(2);
	transform:scale(2);
	opacity:0;
}
}

js代码


```bash
$(function() {
    $("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();

        $(this).append("<span class='ripple'></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");

    });
});

weihe_7306

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
水波块切换选项导航栏

html代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="waterTab.css"/> <script t...
复制链接

扫一扫