jquery css3点击水波动画滑动导航条代码



104 413 138



特效描述:jquery css3点击 水波动画 滑动导航条代码,css3滑动导航条,水波动画,水波导航条,动画导航条

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/default.css">

2. 引入JS

<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代码

<div class="htmleaf-container">
	<div class="htmleaf-content bgcolor-3">
		<ul>
			<li>Tab One</li>
			<li>Tab Two</li>
			<li>Tab Three</li>
			<li class="slider"></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
	$(".htmleaf-content ul li").click(function (e) {
		// make sure we cannot click the slider
		if ($(this).hasClass('slider')) {
			return;
		}
		/* Add the slider movement */
		// what tab was pressed
		var whatTab = $(this).index();
		// Work out how far the slider needs to go
		var howFar = 160 * whatTab;
		$(".slider").css({
			left: howFar + "px"
		});
		/* Add the ripple */
		// Remove olds ones
		$(".ripple").remove();
		// Setup
		var posX = $(this).offset().left,
	  posY = $(this).offset().top,
	  buttonWidth = $(this).width(),
	  buttonHeight = $(this).height();
		// Add the element
		$(this).prepend("<span class='ripple'></span>");
		// Make it round!
		if (buttonWidth >= buttonHeight) {
			buttonHeight = buttonWidth;
		} else {
			buttonWidth = buttonHeight;
		}
		// Get the center of the element
		var x = e.pageX - posX - buttonWidth / 2;
		var y = e.pageY - posY - buttonHeight / 2;
		// Add the ripples CSS and start the animation
		$(".ripple").css({
			width: buttonWidth,
			height: buttonHeight,
			top: y + 'px',
			left: x + 'px'
		}).addClass("rippleEffect");
	});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 滑动选项卡 滑动切换 h5图片动画 h5图标动画 html5图片动画 html5图标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到