jquery css3點擊水波動畫滑動導航條代碼



110 436 146



特效描述: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

加群請備注:從官網了解到

老夫子电子