zoukankan      html  css  js  c++  java
  • 手机购物车添加动画

    ¥('.access_digital .add','click',function(){
    
          var icoimg_btn = $(this).parents(".wtxt").siblings(".icoimg"),
              wh = $(window).height(),//是文档窗口高度
              ot = icoimg_btn.offset().top,
              ds =  document.body.scrollTop,// ds = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 
              icoimg_h = icoimg_btn.height();
    
              bh = wh - icoimg_h - [ot - ds ];
           
          
    
              icoimg_btn.css({ bottom:bh,right:"50px" }); 
    
    
              cur = $(this).parents(".wtxt").siblings(".icoimg");
    
              cur.addClass("cur");
    
              
              setTimeout(function(){
                          $(".cur").removeClass("cur");  
                          cur.removeAttr("style");   
              },800);
    
    
      });
    

      

    css:

    @keyframes ico{
    	0% {
    
         	opacity:1;
         	
         	
         }
    
       
    
    	 100%{
    
    	 	bottom:0;
    	 	left:3%;
    		 0.1px;
    		height: 0.1px;
    		
         }
     }
    
     @-webkit-keyframes ico{
    	 0% {
    
    		opacity:1;
    		
    
         }
    
      
    
    	 100%{
    	 	bottom:0;
    	 	left:3%;
    		 0.1px;
    		height: 0.1px;
    		
         }
     }
    
    .icoimg{
    		
    		@include rounded(35px);
    		@extend %pa;
    		bottom:10px;
    		left:75%;
    		z-index:999;
    		opacity:0;
    		 35px;
    		height: 35px;
    		&.cur{
    			@extend %block;
    			position:fixed;
    			opacity:1;
    			
    			
    		}
    
    		&.cur:not(:target){
    			-webkit-animation-name: ico;
    			-webkit-animation-duration:1s;
    			-webkit-animation-iteration-count: 1;
    			animation-name: ico;
    			animation-duration:1s;
    			animation-iteration-count: 1;
    			
    			
    		}
    
    	
    	}
    

      

  • 相关阅读:
    https 适配
    SDWebImage 的简单使用方法
    第三方API使用的好习惯
    关于IPicture::Render函数
    标准模板库(STL)MAP容器使用详解
    STL容器
    c++ 遍历map的时候删除元素
    C++的try_catch异常
    Makefile 自动生成头文件的依赖关系 .
    调试过程中,内存泄露检测信息
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/4826745.html
Copyright © 2011-2022 走看看