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

最新推荐文章于 2017-07-10 22:47:21 发布

Bwz_Learning

最新推荐文章于 2017-07-10 22:47:21 发布

阅读量416

点赞数 1

分类专栏： JavaScript_Bak 文章标签： JavaScript的缓冲运动 JavaScript JavaScript的运动任意属性数值的运动

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51742955

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 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>

Bwz_Learning

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
43、JavaScript的运动----任意属性值的运动---透明度的改变

1、offset属性的Bug • 有边框的Div变宽 –用currentStyle代替offset2、原有运动框架的问题 • 只能让某个值运动起来 • 如果想让其他值运动起来，要修改程序3、扩展的运动框架 • 运动属性作为参数 • 封装opacity –小数的问题
复制链接

扫一扫