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

Myth丶恋晨 2022-09-22 04:58 155阅读 0赞

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、测试图片

![20160628131534098][]

[20160628131534098]: /images/20220721/15e4a71a4c9e4789952dbfa1590faa80.png