JavaScript 高级课程之缓冲+多个DIV运动框架实现 + 透明度

最新推荐文章于 2019-03-16 13:48:00 发布

戴宇琪

最新推荐文章于 2019-03-16 13:48:00 发布

阅读量608

点赞数

分类专栏： WEB前端开发

本文链接：https://blog.csdn.net/yuqidai/article/details/51627020

版权

WEB前端开发专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>JavaScript 高级课程之缓冲+多个DIV运动框架实现透明度</title>
<style>
div { width:100px ; height:100px; margin-top:10px; background-color:#FF0004;  }
</style>
<script>
window.onload = function(){
	var aDiv = document.getElementsByTagName('div');

		aDiv[0].Timer = null;
		aDiv[0].onmouseover = function(){
			startMove(this,'width',1000);
			}
		aDiv[0].onmouseout = function(){
			startMove(this,'width',100);
			}
		
		aDiv[1].Timer = null;
		aDiv[1].onmouseover = function(){
			startMove(this,'opacity',30);
			}
		aDiv[1].onmouseout = function(){
			startMove(this,'opacity',100);
			}
			
		aDiv[2].Timer = null;
		aDiv[2].onmouseover = function(){
			startMove(this,'height',300);
			}
		aDiv[2].onmouseout = function(){
			startMove(this,'height',100);
			}
			
		aDiv[3].Timer = null;
		aDiv[3].onmouseover = function(){
			startMove(this,'fontSize',100);
			}
		aDiv[3].onmouseout = function(){
			startMove(this,'fontSize',16);
			}
}

function startMove(obj, iT, value){
	clearInterval(obj.Timer);
	obj.Timer = setInterval(function(){
		var iCur = 0;
		
		if(iT == 'opacity'){
				iCur = parseFloat(getStyle(obj,iT))*100;
			}else{
				iCur = parseInt(getStyle(obj,iT));
			}
		var iSeppd = (value - iCur)/8;
		iSeppd = iSeppd>0?Math.ceil(iSeppd):Math.floor(iSeppd);
		if(iCur == value){
			clearInterval(obj.Timer);
			
			//清除100数字
			setTimeout(function(){
					obj.innerHTML = '';
				},2000);
		}else{
			if(iT == 'opacity'){
				obj.style.filter = 'alpha(opacity:'+ (iCur+iSeppd) +')';
				obj.style.opacity = (iCur+iSeppd)/100;
				obj.innerHTML = iCur + iSeppd;
				}else{
				obj.style[iT] = iCur + iSeppd + 'px';
			}
		}
	},20);
}

function getStyle(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}
</script>
</head>

<body>
	<div></div>
    <div></div>
    <div></div>
    <div style=" font-size:">123</div>
</body>
</html>

戴宇琪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 高级课程之缓冲+多个DIV运动框架实现 + 透明度

JavaScript 高级课程之缓冲+多个DIV运动框架实现透明度div { width:100px ; height:100px; margin-top:10px; background-color:#FF0004; filter:alpha(opacity:30); opacity:0.3; }window.onload = function(){ var aDiv = docum
复制链接

扫一扫