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


    	  $("#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的效果应用。。

  • 相关阅读:
    Spring MVC中的(多)文件上传和下载
    SSM整合案例
    事务的四种隔离级别和七种传播行为
    注解方式实现IOC和AOP
    顾问包装通知
    使用ProxyFactoryBean进行AOP
    动态代理(jdk&cglib)的用法
    英语中12个典型的中国式错误
    翻译:你的声音太小了,可以大一些吗
    今天天气怎么样
  • 原文地址:https://www.cnblogs.com/qfly/p/4654648.html
Copyright © 2020-2023  润新知