• 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的效果应用。。

  • 相关阅读:
    win10+PHP 安装memcache
    win10+PHP 安装redis
    一个github搞定微信小程序支付系列
    Linux下新建一个站点
    Linux下更改mysql版本
    零基础配置Linux服务器环境
    手把手教你使用ueditor
    react学习三
    react学习二 生命周期
    window.location.replace和window.location.href区别
  • 原文地址:https://www.cnblogs.com/qfly/p/4654648.html
Copyright © 2020-2023  润新知