animate css3 应用的借鉴，一个同事写的JS

最新推荐文章于 2025-08-19 10:52:06 发布

转载最新推荐文章于 2025-08-19 10:52:06 发布 · 73 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qfly/p/4654648.html

	  $("#banner").height($(window).height()-125);
	   $(window).resize(function(){ 
	   $("#banner").height($(window).height()-125);
     });   
	//首页幻灯
	$(".indeximgs:first").show();
	
	var i=0;
	$(".leftbut").click(function(){
			$(".indeximgs").hide();
			i=i-1;
                         if (i==-1) {i=5}
			$(".indeximgs:eq("+i+")").fadeIn(1000);
		});
		
	$(".rightbut").click(function(){	
			$(".indeximgs").hide();
                        i=i+1;
                          if (i==6) {i=0}	
			$(".indeximgs:eq("+i+")").fadeIn(1000);                      
		});
	//logo动画效果
	$("#logo").hover(
	function(){
			 $("#logo img").attr('src','img/logo1.jpg');
	         $("#logo img").addClass('animated flipInY');
		},
	function(){
		 $("#logo img").removeClass('flipInY');
		 $("#logo img").addClass('animated flipInX');
		  $("#logo img").attr('src','img/logo.jpg');
	});

 	 //导航动画效果
	 $("#guild ul li").hover(
	 		function(){	$(this).addClass('animated pulse');},
			function(){$(this).removeClass('pulse');}
	 );
	//banner出现时一次动画
		$("#banner").addClass('animated fadeInDown');
	//搜索事件
		$("#sbut").hover(function(){$("#search").show();$("#search").removeClass('slideOutLeft'); $("#search").addClass('animated fadeInLeftBig');});
		$("#closesearch").click(function(){setTimeout(function(){$("#search").hide();},1000);$("#search").addClass('animated slideOutLeft');$("#search").removeClass('fadeInLeftBig');});
	//优化显示
	$("#indexperson").css("visibility","hidden");
	$("#huandeng").css("visibility","hidden");
	$("#foot").css("visibility","hidden");

	 $(document).ready(function(){
		 $(window).bind("scroll", function(event){
			 	if ($(window).scrollTop()>303 && $(window).scrollTop()<407) { 
				$("#indexperson").css("visibility","visible");
				$("#indexperson").addClass('animated fadeInUp');
				//setTimeout(function(){$("#indexperson").removeClass('fadeInUp');},2000);
				}
			 	if ($(window).scrollTop()>515 && $(window).scrollTop()<930) { 
				$("#huandeng").css("visibility","visible");
				$("#huandeng").addClass('animated fadeInUp');
				//setTimeout(function(){$("#huandeng").removeClass('fadeInUp');},2000);
				}
				if ($(window).scrollTop()>1300 && $(window).scrollTop()<1500) { 
				$("#foot,#copyright").css("visibility","visible");
				$("#foot,#copyright").addClass('animated fadeInUp');
				//setTimeout(function(){$("#foot").removeClass('rotateInDownLeft');},2000);
				}
		 });
		 
	 
		});

　　同事做的网站sanbf.com的效果应用。。

转载于:https://www.cnblogs.com/qfly/p/4654648.html