图片翻转动画原理解析

;(function($){
    $.fn.dbRotate2D=function(options){
        var opt={
            rotateSpeed:100       //ȸÀü¼Óµµ
        }
        $.extend(opt,options);
        return this.each(function(){
            var $this=$(this);
            var $img=$this.find('img');
            var imgWidth=$img.width();
            var imgHeight=$img.height();
            var mOver=false;
            init();

            function init(){
                setCss();
                setMouseEvent();
            }
            
            function setCss(){        
                $this.css({'width':imgWidth,'height':imgHeight});
                $img.data({'out':$img.attr('src'),'over':$img.attr('alt')});
            }
            
            function setMouseEvent(){
                $this.bind('mouseenter',function(){
                    mOver=true;
                    setAnimation();
                    
                }).bind('mouseleave',function(){
                    mOver=false;
                    setAnimation();
                })
            }
                        
            function setAnimation(){
                if(mOver==true){
                    $img.stop()
                        .animate({'left':imgWidth/2,'width':0},opt.rotateSpeed,function(){
                            $(this).attr({'src':$(this).data('over')});
                        })
                        .animate({'left':0,'width':imgWidth},opt.rotateSpeed)
                    
                }else{
                    $img.stop()
                        .animate({'left':imgWidth/2,'width':0},opt.rotateSpeed,function(){                        
                            $(this).attr({'src':$(this).data('out')});
                        })
                        .animate({'left':0,'width':imgWidth},opt.rotateSpeed)
                }
            }    
        })            
    }            
})(jQuery)

View Code

首先把代码贴上，然后在说原理

回头在来写、

转载于:https://www.cnblogs.com/linksgo2011/p/3300931.html