47、JavaScript的运动----完美运动框架的应用----放大缩小图片的实现(布局转换的实现)

最新推荐文章于 2018-10-23 21:34:21 发布

Bwz_Learning

最新推荐文章于 2018-10-23 21:34:21 发布

阅读量721

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript_Bak 文章标签： Javascript JavaScript的运动布局转换 JavaScript的缓冲运动

本文链接：https://blog.youkuaiyun.com/zbw18297786698/article/details/51775167

JavaScript_Bak 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一个基于JavaScript的完美运动框架，该框架能够实现平滑的元素位置和尺寸变化。通过自定义函数`startMove`控制元素的动画效果，并应用于图片放大缩小的功能。文章提供了完整的代码示例和解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、JavaScript的运动----完美运动框架的应用----放大缩小图片的实现

2、测试代码

2.1 move.js

/**
 * 可以方便的获取到非行间样式的数值
 * @param {Object} obj
 * @param {Object} attr
 */
function getStyle(obj, attr) {
	if (obj.currentStyle) {
		return obj.currentStyle[attr];
	} else {
		return getComputedStyle(obj, false)[attr];
	}
}
/**
 * 要注意运动停止条件的判断
 * @param {Object} obj
 * @param {Object} json
 * @param {Object} fn
 */
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.检测停止
			//要注意,完美运动框架运动的停止的检测,与单个属性停止的检测不一样
			//这个要等所有的属性,都到了后，才停止运动
			//所以有一个属性值没到的话,将标志运动停止的变量bStop设置为false
			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';
			}
		}
		//4、对于运动的判断
		if (bStop) {
			clearInterval(obj.timer);

			if (fn) {
				fn();
			}
		}
	}, 30)
}

2.2 html代码

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#ul1 {
				width: 366px;
				margin: 0 auto;
				position: relative;
				margin-top: 50px;
			}
			
			#ul1 li {
				list-style: none;
				width: 100px;
				height: 100px;
				background: #CCC;
				border: 1px solid black;
				float: left;
				margin: 10px;
				z-index: 1;
			}
			
			img {
				overflow: hidden;
				width: inherit;
				height: inherit;
			}
		</style>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<script src="move.js"></script>
		<script>
			window.onload = function() {
				var oUl = document.getElementById('ul1');
				var aLi = oUl.getElementsByTagName('li');
				var iMinZindex = 2;
				var i = 0;
				//1.布局转换
				for (i = 0; i < aLi.length; i++) {
					//aLi[i].innerHTML='left:'+aLi[i].offsetLeft+', top:'+aLi[i].offsetTop;
					aLi[i].style.left = aLi[i].offsetLeft + 'px';
					aLi[i].style.top = aLi[i].offsetTop + 'px';
				}
				for (i = 0; i < aLi.length; i++) {
					aLi[i].style.position = 'absolute';
					aLi[i].style.margin = '0';
				}
				//2.加事件
				for (i = 0; i < aLi.length; i++) {
					aLi[i].onmouseover = function() {
						//设置显示的层级关系
						this.style.zIndex = iMinZindex++;
						//根据
						startMove(this, {
							marginLeft: -50,
							marginTop: -50,
							width: 200,
							height: 200
						});
					};
					aLi[i].onmouseout = function() {
						startMove(this, {
							width: 100,
							height: 100,
							marginLeft: 0,
							marginTop: 0
						});
					};
				}
			};
		</script>
	</head>

	<body>
		<ul id="ul1">
			<li><img src="Desert.jpg" /></li>
			<li><img src="Desert.jpg" /></li>
			<li><img src="Desert.jpg" /></li>
			<li><img src="Desert.jpg" /></li>
			<li><img src="Desert.jpg" /></li>
			<li><img src="Desert.jpg" /></li>
			<li><img src="Desert.jpg" /></li>
			<li><img src="Desert.jpg" /></li>
			<li><img src="Desert.jpg" /></li>
			<li><img src="Desert.jpg" /></li>
		</ul>
	</body>

</html>

3、测试图片