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

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

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

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

js代码

<script type="text/javascript" src="https://img.x22t.com/file/2020/04/25/3ea99d0abc00e3e7918af7d0fa3d9cf94521.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>

分享到 :
相关推荐

Leave a Reply

Your email address will not be published. Required fields are marked *