首页 > 移动平台 > 详细

手机购物车添加动画

时间:2015-09-21 19:05:46      阅读:246      评论:0      收藏:0      [点我收藏+]
¥(‘.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%;
		width: 0.1px;
		height: 0.1px;
		
     }
 }

 @-webkit-keyframes ico{
	 0% {

		opacity:1;
		

     }

  

	 100%{
	 	bottom:0;
	 	left:3%;
		width: 0.1px;
		height: 0.1px;
		
     }
 }

.icoimg{
		
		@include rounded(35px);
		@extend %pa;
		bottom:10px;
		left:75%;
		z-index:999;
		opacity:0;
		width: 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;
			
			
		}

	
	}

  

手机购物车添加动画

原文:http://www.cnblogs.com/xupeiyu/p/4826745.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!