zoukankan      html  css  js  c++  java
  • 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的效果应用。。

  • 相关阅读:
    CentOS7 安装 RabbitMQ
    测试工程师 - 要了解的技能总结
    STF 连接其它操作系统上的安卓设备实操介绍【转】
    adb -a server nodaemon,设备一直显示 offline,而 adb devices 一直显示 device【已解决】
    Mac 之 STF 搭建(淘宝源安装)
    无损压缩图片
    jenkins 之 Android 打包及上传至蒲公英
    JoinPoint
    元数据库 information_schema.tables
    @RestControllerAdvice全局异常统一处理
  • 原文地址:https://www.cnblogs.com/qfly/p/4654648.html
Copyright © 2011-2022 走看看