完美运动框架（支持不等宽高同时运动，支持透明度变化）

qianlingvip

于 2018-11-27 20:59:27 发布

阅读量149

点赞数

本文链接：https://blog.csdn.net/zhangqling/article/details/84573326

版权

html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>lianshi</title>
	<style>
		#div1{
			width: 100px;
			height: 100px;
			background: red;
			color: orange;
			font-size: 46px;
			text-align: center;
			line-height: 360px;
			overflow: hidden;
			filter: alpha(opacity:60);
			opacity: 0.6;
			margin:0 auto;
		}
	</style>
	<script src="move.js"></script>
	<script>
		window.onload=function(){
			var oBtn=document.getElementById("btn");
			var oBtn1=document.getElementById("btn1");
			var oDiv=document.getElementById("div1");
			oBtn.onclick=function(){
				startMove(oDiv,{height:360,width:960},function(){
					startMove(oDiv,{opacity:100});
				});
			}
			oBtn1.onclick=function(){
				startMove(oDiv,{height:100,width:100,opacity:60});
			}
		}
	</script>
</head>
<body>
	<div id="div1">完美运动框架</div>
	<input type="button" value="点击开始运动" id="btn">
	<input type="button" value="点击开始回归运动" id="btn1">
</body>
</html>

js代码如下：js支持链式运动，html中第一个starMove就是使用了链式运动

//此运动函数为封装成函数，支持宽度，高度，字体大小，透明度变化。三个参数分别为obj：谁运动。attr：什么属性运动。
//json[attr]:目标位置运动。
//获得非行间样式
function getStyle(obj,attr){
	if (obj.currentStyle) {
		return obj.currentStyle[attr];
	}else{
		return getComputedStyle(obj,false)[attr];
	}
}
//运动函数
function startMove(obj,json,fn){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var bStop=true;//判断都到达目标位置
		for(var attr in json){
			//1、取当前值
			var iCur=0;
			if (attr=='opacity') {
				iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
			}else{
				iCur=parseInt(getStyle(obj,attr));
			}
			//2、计算速度
			var iSpeed=(json[attr]-iCur)/8;
			iSpeed=iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

			//3、判断是否到达目标点
			if (iCur!=json[attr]) {
				bStop=false;
			}
			
			if (attr=='opacity') {
				obj.style.filter='alpha(opacity:'+iCur+iSpeed+')';
				obj.style.opacity=(iCur+iSpeed)/100;
			}else{
				obj.style[attr]=iCur+iSpeed+'px';
			}	
		}
		if (bStop) {
			clearInterval(obj.timer);
			if (fn) {
				fn();
			}
		}
	},30);
}

qianlingvip

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完美运动框架（支持不等宽高同时运动，支持透明度变化）

html代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;lianshi&lt;/title&gt; &lt;style&gt; #div1{ width: 100px;
复制链接

扫一扫