js运动技术--链式运动框架

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

柏油

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

阅读量305

点赞数

分类专栏： # JAVA WEB

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

版权

JAVA WEB 专栏收录该内容

59 篇文章 3 订阅

订阅专栏

其原理是函数startMove多了一个参数，这个参数是一个函数，可以在定时器结束时调用。

<!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,style1,iTarget,fnEnd){
				var oTxt = document.getElementById("txt");		
				clearInterval(obj.timer);
		
				obj.timer = setInterval(function(){
					var cur = 0;
					if(style1 == 'opacity'){
						 cur = parseFloat(getStyle(obj,style1))*100;
					}
					else {
						cur = parseInt(getStyle(obj,style1));
					}
					
					var speed = (iTarget - cur) / 6;
					speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
					
					oTxt.value = cur;
					
					if(iTarget == cur){
						clearInterval(obj.timer);
						
						if(fnEnd)fnEnd();			//传递了函数则执行；		
					}
					else {
						if(style1 == 'opacity'){
							obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
							obj.style.opacity = (cur+speed) / 100;
						}
						else{
							obj.style[style1] = cur + speed + 'px';
						}
					}
				},30);
			}
			
			
			window.onclick = function(){
				var oDiv1 = document.getElementById("div1");
				oDiv1.onmouseover = function(){
					startMove(oDiv1,'width',400,function(){
						startMove(oDiv1,'height',400,function(){
							startMove(oDiv1,'opacity',100);
						});
					});
				}
				oDiv1.onmouseout = function(){
					startMove(oDiv1,'opacity',30,function(){
						startMove(oDiv1,'height',200,function(){
							startMove(oDiv1,'width',200);
						})
					});
				}
			}
		</script>
	</head>
	<body>
		<input type = "text" id = "txt"/><br />
		<div id = "div1">改变透明度</div>
	</body>
</html>

柏油

关注

0
点赞
踩
0

收藏

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

其原理是函数startMove多了一个参数，这个参数是一个函数，可以在定时器结束时调用。 #div1{height: 200px;width: 200px;background: red;margin: 20px;float: left;left: 20px; top: 20px; border: 10px solid black; filter: a
复制链接

扫一扫