js运动技术--完美运动框架

最新推荐文章于 2023-04-28 09:12:32 发布

柏油

最新推荐文章于 2023-04-28 09:12:32 发布

阅读量199

点赞数

分类专栏： # JAVA WEB

本文链接：https://blog.csdn.net/ldw201510803006/article/details/75106357

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

运用JSON传递参数：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{height: 200px;width: 200px;background: red;margin: 20px;float: left;left: 20px; top: 20px;
			border: 10px solid black;
			filter: alpha(opacity;30);opacity: 0.3;}
		</style>
		<script>
			function getStyle(obj,name){
				if(obj.currentStyle){
					return obj.currentStyle[name];
				}
				else{
					return getComputedStyle(obj,false)[name];
				}
			}
			
			
			function startMove(obj,JSON,fnEnd){	
				clearInterval(obj.timer);
		       
				obj.timer = setInterval(function(){
					
					var flag = true;
					
					for (var arguments in JSON) {
					var cur = 0;
					
					if(arguments == 'opacity'){
						 cur = parseFloat(getStyle(obj,arguments))*100;
					}
					else {
						cur = parseInt(getStyle(obj,arguments));
					}
					
					var speed = (JSON[arguments] - cur) / 6;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					
					if(JSON[arguments] != cur){
                          flag = false;		
					}
					
					if(arguments == 'opacity'){
							obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
							obj.style.opacity = (cur+speed) / 100;
						}
						else{
							obj.style[arguments] = cur + speed + 'px';
						}
					}// for

                 if(flag == true) {   //当所有的JSON值都为目标值的时候才关闭定时器
                 		clearInterval(obj.timer);
						if(fnEnd)fnEnd();			//传递了函数则执行；
                 }

				},30);
			}
			
			
			window.onclick = function(){
				var oDiv1 = document.getElementById("div1");
				oDiv1.onmouseover = function(){
					startMove(oDiv1,{'width':205,'height':400,'opacity':100});
				}
				oDiv1.onmouseout = function(){
                 startMove(oDiv1,{'width':200,'height':200,'opacity':30});
				}
			}
		</script>
	</head>
	<body>
		<div id = "div1">完美运动框架</div>
	</body>
</html>

柏油

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js运动技术--完美运动框架

运用JSON传递参数： #div1{height: 200px;width: 200px;background: red;margin: 20px;float: left;left: 20px; top: 20px; border: 10px solid black; filter: alpha(opacity;30);opacity: 0.3;}
复制链接

扫一扫