43、JavaScript的运动----任意属性值的运动---透明度的改变

阳光穿透心脏的1/2处 2022-09-21 14:26 208阅读 0赞

1、offset属性的Bug

• 有边框的Div变宽

–用currentStyle代替offset

2、原有运动框架的问题

• 只能让某个值运动起来

• 如果想让其他值运动起来，要修改程序

3、扩展的运动框架

• 运动属性作为参数

• 封装opacity

–小数的问题

4、用currentStyle代替offset的相关封装函数

function getStyle(obj, attr) {
    				if (obj.currentStyle) {
    					return obj.currentStyle[attr];
    				} else {
    					return getComputedStyle(obj, false)[attr];
    				}
    			}

5、关于任意属性值的运动变化的实现（ 封装 opacity）

<head>
    		<meta charset="UTF-8">
    		<title>任意值运动框架</title>
    		<style>
    			#div1 {
    				width: 200px;
    				height: 200px;
    				background: red;
    				filter: alpha(opacity: 30);
    				opacity: 0.3;
    			}
    		</style>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>无标题文档</title>
    		<script type="text/javascript">
    			window.onload = function() {
    					var oDiv = document.getElementById('div1');
    					oDiv.onmouseover = function() {
    						startMove(oDiv, 'opacity', 100);
    					}
    					oDiv.onmouseout = function() {
    						startMove(oDiv, 'opacity', 30);
    					}
    				}
    				/**
    				 * 获取一个对象的样式数值
    				 * @param {Object} obj   对象
    				 * @param {Object} attr  css属性
    				 */
    			function getStyle(obj, attr) {
    				if (obj.currentStyle) {
    					return obj.currentStyle[attr];
    				} else {
    					return getComputedStyle(obj, false)[attr];
    				}
    			}
    			/**
    			 * 任意数值的运动框架 
    			 * @param {Object} obj   要运动的对象
    			 * @param {Object} attr  属性
    			 * @param {Object} iTarget  目标数值
    			 */
    			function startMove(obj, attr, iTarget) {
    				clearInterval(obj.timer);
    				obj.timer = setInterval(function() {
    					var iCur = 0;
    					//对于透明度,进行特殊的处理
    					if (attr == 'opacity') {
    						iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
    					} else {
    						iCur = parseInt(getStyle(obj, attr));
    					}
    					var iSpeed = (iTarget - iCur) / 8;
    					iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    					if (iCur == iTarget) {
    						clearInterval(obj.timer);
    					} else {
    						//对于透明度,进行特殊的处理
    						if (attr == 'opacity') {
    							obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
    							obj.style.opacity = (iCur + iSpeed) / 100;
    							document.getElementById('txt1').value = obj.style.opacity;
    						} else {
    							obj.style[attr] = iCur + iSpeed + 'px';
    						}
    					}
    				}, 30)
    			}
    		</script>
    	</head>
    
    	<body>
    		<input id="txt1" type="text" />
    		<div id="div1"></div>
    	</body>