变速横向滚动条、旋转图形

最新推荐文章于 2024-11-06 12:47:23 发布

1024aaa

最新推荐文章于 2024-11-06 12:47:23 发布

阅读量703

点赞数

分类专栏： html 文章标签： function timer class div mozilla safari

本文链接：https://blog.csdn.net/yangzlgg/article/details/6874263

版权

html 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

//横向变速滚动条 ProgressBar3
function ProgressBar(options){
	
	var p = document.getElementById(options.p);
	var moveV = 0; //移动速度
	var MaxMoveV = 20;
	var moveInterval = 10;
	var nextX = 0;
	var currentX = 0;
	var nextX = 0;
	var ratio = 1;//一万条数据 : 1px/1ms
	var a = 0;//加速度初始为零
	var i = 0;//全局变量
	var t = 0;
	var Vo = 0;//原始速度
	var V = 0;
	var Vd = 0;
	var timeout;
	
    if(options.id)window[options.id] = this;
	
	//保存定时器到 window
	var timerIndex;
	if(window.allTimer == undefined){
		window.allTimer =  new Array();
	}
	timerIndex = window.allTimer.length;
	window.allTimer.push('');
	
	
	function init (){
		//进度条初始化样式
		p.style.backgroundPosition = "0px 0px";
		return this;
	}
	init();
	
	
	function run() {
		if(typeof(timeout)=="number"){clearTimeout(timeout)}
		if(a != 0){
			moveV = Vo+(i*a);
			if(i == t){
				a = 0;//加速次数大于t后，停止加速
			}
			i++;
		}
		
		//目标座标
		if(moveV > MaxMoveV) moveV = MaxMoveV;
		nextX = currentX + Math.abs(moveV);
		p.style.backgroundPosition = nextX + "px 0px";
		currentX = nextX;
		timeout = setTimeout(run,moveInterval);
		window.allTimer[timerIndex] = timeout;
	}
	
	this.controlled = function(){
		if(a != 0){
			moveV = Vo+(i*a);
			if(i == t){
				a = 0;//加速次数大于t后，停止加速
			}
			i++;
		}
		
		//目标座标
		if(moveV > MaxMoveV) moveV = MaxMoveV;
		nextX = currentX + Math.abs(moveV);
		p.style.backgroundPosition = nextX + "px 0px";
		currentX = nextX;
	}
	
	//修改速度
	this.shiftV = function (v){
		if(moveV == v/ratio)return;
		//直接加速
		//moveV = v/ratio;
		
		//匀速加速
		V  = v/ratio;
		Vo = moveV;
		Vd = (V-Vo);//速度差
		t = 1500/moveInterval;
		a = Vd/t;
		i = 1;
	}
	
	this.stop = function(){
		clearTimeout(timeout);
	}
	
	this.start = function(){
		run();
		return this;
	}
	return this;
}

	function UnifiedControl(){
		var moveInterval = 10;
		var target = new Array();
		var timer='';
		
		//保存定时器到 window
		var timerIndex;
		if(window.allTimer == undefined){
			window.allTimer =  new Array();
		}
		timerIndex = window.allTimer.length;
		window.allTimer.push('');
		
		this.addTarget = function (rotate){
			target.push(rotate);
		}
		
		function run(){
			clearTimeout(timer)
			for(var t in target){
				rotate = target[t];
				rotate.controlled();
			}
			timer = setTimeout(run,moveInterval);
        	window.allTimer[timerIndex] = timer;
		}
		
		this.start = function (){
			run();
		}
		
		this.stop = function (){
			clearTimeout(timer);
		}
	}
	
	function Rotate(options){
	    var ua = navigator.userAgent,
	        isIE = /msie/i.test(ua) && !window.opera;
	    var i = 0, sinDeg = 0, cosDeg = 0, timer = null ;
	    var target;
	    var ratio = 1;
	  	var moveInterval = 10;
	  	var a = 0;//加速度初始为零
		var i = 0;//全局变量
		var t = 0;
		var Vo = 0;//原始速度
		var V = 0;
		var Vd = 0;
		var moveV = 0;
	    var MaxMoveV = 20;
	    var currentD = 0;//当前角度
	    var nextD = 0;//当前角度
	    var orginW = 0;
	    var orginH = 0;
	    /*
	    var alertValue = 8;
	    var vn = true;
	    if(!vn && moveV < alertValue){
    		$(target).find('img').attr('src','index/icon2.png');
    		vn = true;
    	}
    	if(vn && moveV >= alertValue){
    		$(target).find('img').attr('src','index/redBg1.png');
    		vn = false;
    	}*/
	    
	    if(options){
	    	if(options.target)target = document.getElementById(options.target);
	    	if(options.id)window[options.id] = this;
	    }
	    
	    
	  	//保存定时器到 window
		var timerIndex;
		if(window.allTimer == undefined){
			window.allTimer =  new Array();
		}
		timerIndex = window.allTimer.length;
		window.allTimer.push('');
	    
	  	//改变角度
        function changeAngle (angle) {
            if (isIE) { // IE
                cosDeg = Math.cos(angle * Math.PI / 180);
                sinDeg = Math.sin(angle * Math.PI / 180);
                with(target.filters.item(0)) {
                    M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); 
                }
                target.style.top = (orginH - target.offsetHeight) / 2 + 'px';
                target.style.left = (orginW - target.offsetWidth) / 2 + 'px';
            } else if (target.style.MozTransform !== undefined) {  // Mozilla
                target.style.MozTransform = 'rotate(' + angle + 'deg)';
            } else if (target.style.OTransform !== undefined) {   // Opera
                target.style.OTransform = 'rotate(' + angle + 'deg)';
            } else if (target.style.webkitTransform !== undefined) { // Chrome Safari
                target.style.webkitTransform = 'rotate(' + angle + 'deg)';
            } else {
                target.style.transform = "rotate(" + angle + "deg)";
            }
        }
	  	
	    //自身独立运行
	    this.run = function run(){
	    	if(typeof(timer)=="number"){clearTimeout(timer)};
	    	if(a != 0){
    			moveV = Vo+(i*a);
    			if(i == t){
    				a = 0;//加速次数大于t后，停止加速
    			}
    			i++;
    		}
        	//moveV = Math.abs(moveV);控制正转反转
        	if(moveV > MaxMoveV) moveV = MaxMoveV;
        	nextD = currentD + moveV;
        	if(nextD != currentD)changeAngle(nextD);
        	currentD = nextD;
        	timer = setTimeout(run,moveInterval);
        	window.allTimer[timerIndex] = timer;
	    }
	    
	    //被控制运行
	    this.controlled = function(){
	    	if(a != 0){
	    		moveV = Vo+(i*a);
	    		if(i == t){
	    			a = 0;
	    		}i++;
	    	}
        	if(moveV > MaxMoveV) {
        		moveV = MaxMoveV;
        	}
        	nextD = currentD + moveV;
        	if(nextD != currentD){
        		changeAngle(nextD);
        	}
        	currentD = nextD;
	    }
	  	
	    this.init = function (options){
	    	target = document.getElementById(options.target);
	    }
	    
		this.start = function (){
			this.run();
		}
		
		this.stop = function (){
			clearTimeout(timer);
		}
	    
	    this.shiftV = function (degree) {
	        orginW = target.clientWidth, orginH = target.clientHeight;
	            
          	//匀速加速
    		V  = degree/ratio;
    		Vo = moveV;
    		Vd = (V-Vo);//速度差
    		t = 1500/moveInterval;
    		a = Vd/t;
    		i = 1;
	    }
	}

test.

var control = new UnifiedControl();
	$(document).ready(function() {	
		//直线
		control.addTarget(new ProgressBar({p : "diPb", id:'DIPB'}));
		control.addTarget(new ProgressBar({p : "diPb2", id:'DIPB2'}));
		control.addTarget(new ProgressBar({p : "dosPb", id:'DOSPB'}));
		control.addTarget(new ProgressBar({p : "dosPb2", id:'DOSPB2'}));
		control.addTarget(new ProgressBar({p : "disPb", id:'DISPB'}));
		control.addTarget(new ProgressBar({p : "disPb2", id:'DISPB2'}));
		//圆形
		control.addTarget(new Rotate({target:'dasR',id:'DASR'}));
		control.addTarget(new Rotate({target:'dpsR',id:'DPSR'}));
		control.addTarget(new Rotate({target:'dosR',id:'DOSR'}));
		control.addTarget(new Rotate({target:'disR',id:'DISR'}));
		control.start();
		
		$('#startBR').click(function() {
			window['DIPB'].shiftV($('#inputShift').val());
			window['DOSPB'].shiftV($('#inputShift').val());
			window['DISPB'].shiftV($('#inputShift').val());
			
		});
		
		$('#startBR2').click(function() {
			window['DIPB2'].shiftV($('#inputShift2').val());
			window['DOSPB2'].shiftV($('#inputShift').val());
			window['DISPB2'].shiftV($('#inputShift').val());
		});
		
		$('#startBR3').click(function() {
			window['DASR'].shiftV($('#inputShift3').val());
			window['DPSR'].shiftV($('#inputShift3').val());
			window['DOSR'].shiftV($('#inputShift3').val());
			window['DISR'].shiftV($('#inputShift3').val());
		});
		
		$('#stop').click(function() {
			control.stop();
		});
	});
<div class="rotate_container">
        <div id="dasR" class="dasR"><img src="index/icon2.png" width="80" height="80" /></div>
    </div>
    <div class="rotate_container">
        <div id="dpsR" class="dpsR"><img src="index/icon2.png" width="80" height="80" /></div>
    </div>
    <div class="rotate_container">
        <div id="dosR" class="dosR"><img src="index/icon2.png" width="80" height="80" /></div>
    </div>
    <div class="rotate_container">
        <div id="disR" class="disR"><img src="index/icon2.png" width="80" height="80" /></div>
    </div>
<div id="diPb" class="diPb" tip="DI_PROCESS"></div>
<div id="diPb2" class="diPb" tip="DI_PROCESS"></div>