ui.effect.js

简单博客功能实现

// 效果接口
//// 需要实现_getSelf()接口，返回要应用效果的元素
//X2.UI.EffectAble={
//    fadeTo:function(start,end,duration){
//        var self=this._getSelf(),step=0;
//        if(duration<=0)start=end;
//        else step=10*(end-start)/duration;
//        function t(){
//            start+=step;
//            if((start-end)*step>=0)start=end;
//            if(self.style.filters){
//                self.style.filter='alpha(opacity='+Math.round(start)+')';
//            }
//            else{
//                self.style.MozOpacity=Math.round(start)/100;
//            }
//            if(start!=end)window.setTimeout(arguments.callee,10);
//        }
//        window.setTimeout(t,10);
//        
//    }
//    ,resizeTo:function(width,height,duration){
//        var self=this._getSelf();
//        if(duration<=0){
//            self.style.width=width+'px';
//            self.style.height=height+'px';
//            return;
//        }
//        
//    }
//    ,moveTo2:function(x,y,duration){
//        var self=this._getSelf();
//        if(duration<=0){
//            self.style.left=x+'px';
//            self.style.top=y+'px';
//            return;
//        }
//    }
//}

X2.UI.Effect={
    //透明度的变化，值越小表示越透明，0-100，duration用毫秒表示，表示持续时间
    FadeTo:function(element,start,end,duration){
        var self=element,step=0;
        if(end==undefined){
            end=start;
            duration=0;    
        }
        if(duration<=0)start=end;
        else step=10*(end-start)/duration;  //获得每10毫秒变化的步长
        function t(){
            start+=step;
            if((start-end)*step>=0)start=end;
            
            self.style.filter='alpha(opacity='+Math.round(start)+')';
            
            if(!self.style.filters){
                self.style.MozOpacity=Math.round(start)/100;
            }
            if(start!=end)window.setTimeout(arguments.callee,10);
        }
        window.setTimeout(t,10);
        
    }
    
    ,ResizeTo:function(element,width,height,duration){

        
    }
    ,MoveTo:function(x,y,duration){

    }
    
    //滚动container的所有子节点
    //说明：firefox下暂时没有成功
    ,Marquee:function(container,interval,delay,mouseOverStop,height){
        if(mouseOverStop){
            Event.observe(container,'mouseover',stop);
            Event.observe(container,'mouseout',start);
        }
        container.style.overflow='hidden';
        if(height)container.style.height=parseInt(height)+'px';
        //避免interval设的太小
        interval=interval>10?interval:20;
	    
	    var current=container.firstChild;
	    while(!current.tagName)current=current.nextSibling;

	    var isInit=true;
	    var s;
	    start();
	    function start(){
	        //初次运行是第一个对象会延迟
	        if(isInit && delay){
	            isInit=false;
	            window.setTimeout(start,delay*1000);
	            return;
	        }
		    s=window.setInterval(function(){
			    if(Math.abs(current.offsetHeight+current.offsetTop)<=2)_delay();
			    else current.style.marginTop=parseInt(current.style.marginTop||0)-1+'px';
    			
		    },interval)
	    }
	    
	    function _delay(){
	        if(delay){
		        window.clearInterval(s);
		        window.setTimeout(function(){
			        start();
		        },delay*1000);
		    }
		    current.parentNode.appendChild(current);
		    current.style.marginTop='auto';
		    current=container.firstChild;
		    while(!current.tagName)current=current.nextSibling;
		    current.style.marginTop='0px';
	    }
	    function stop(){
	        window.clearInterval(s);
	    }
    }
    //滚动条效果
    ,scroll:function(direction,element, distance,duration){
        var self=element;
        var step=10*(distance)/duration;  //获得每10毫秒变化的步长
        function t(){
            switch(direction){
                case 'left':
                    self.scrollLeft+=step;
                    break;
                case 'right':
                    self.scrollLeft-=step;
                    break;
                case 'up':
                    self.scrollTop-=step;
                    break;
                case 'down':
                    self.scrollTop+=step;
                    break;
            }
            
            
            distance-=step;
            if(distance>=0)window.setTimeout(arguments.callee,10);
        }
        window.setTimeout(t,10);
    }

}