jQuery+CSS3左侧固定导航栏子菜单3d展开动画特效

作者 : 小刺猬 本文共870个字,预计阅读时间需要3分钟 发布时间: 2020-07-30 共74人阅读

jQuery+CSS3左侧固定导航栏子菜单3d展开动画特效

这是一款基于jQuery+CSS3实现的左侧固定浮动导航栏代码,鼠标悬停子菜单3d展开动画特效。

js代码

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
	$(function(){
	var thisTime;
	$('.nav-ul li').mouseleave(function(even){
			thisTime	=	setTimeout(thisMouseOut,1000);
	})

	$('.nav-ul li').mouseenter(function(){
		clearTimeout(thisTime);
		var thisUB	=	$('.nav-ul li').index($(this));
		if($.trim($('.nav-slide-o').eq(thisUB).html()) != "")
		{
			$('.nav-slide').addClass('hover');
			$('.nav-slide-o').hide();
			$('.nav-slide-o').eq(thisUB).show();
		}
		else{
			$('.nav-slide').removeClass('hover');
		}
		
	})
	
	function thisMouseOut(){
		$('.nav-slide').removeClass('hover');
	}
	 
	$('.nav-slide').mouseenter(function(){
		clearTimeout(thisTime);
		$('.nav-slide').addClass('hover');
	})
	$('.nav-slide').mouseleave(function(){
		$('.nav-slide').removeClass('hover');
	})

})
</script>
VIP免费 永久VIP免费

已有0人支付


刺猬源码 » jQuery+CSS3左侧固定导航栏子菜单3d展开动画特效

刺猬QQ交流群号多少?
363432

发表评论