完美运动框架展示

最新推荐文章于 2024-07-12 22:37:33 发布

Mr.ZKH

最新推荐文章于 2024-07-12 22:37:33 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/weixin_44415461/article/details/100127985

版权

在多值运动框架上⾯考虑运动完之后传⼊回调函数
注意改变透明度opacity需要做特殊处理

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>完美运动框架展示</title>
	<style type="text/css">
		#div1,div{
			width:100px;
			height:100px;
			background:red;
			float:left;
			margin-right:50px;
		}
		#div2{
			/* 兼容ie的写法*/
			filter: alpha(opacity:30);
			/*非ie的写法*/
			opacity:0.3;
		}
	</style>
</head>
<body>
	<div id="div1">点击我展开</div>
	<div id="div2"></div>
	<div id="div3">点击我收起</div>

	<script type="text/javascript">
		var oDiv1 = document.getElementById('div1')
		var oDiv2 = document.getElementById('div2')
		var oDiv3 = document.getElementById('div3')

		oDiv1.onclick=function(){
			moving(oDiv2,{'width':400,'height':400,'opacity':100},function(){
				alert('我是回调函数')
			})
		}

		oDiv3.onclick=function(){
			moving(oDiv2,{'width':100,'height':100,'opacity':30})
		}

		//写一个方法获取我们需要改变的样式的值
		function getStyleValue(obj,attr){
			if(obj.currentStyle){
				return obj.currentStyle[attr]
			}else{
				return getComputedStyle(obj,false)[attr]
			}
		}
		console.log(getStyleValue(oDiv1,'background'))


		function moving(obj,json,callbackfun){
			clearInterval(obj.timer)
			obj.timer=setInterval(function(){
				//判断所有运动是否完成
				var beclear = true
				for(var attr in json){
					//定义一个变量接收我们需要改变的样式的值
					var currvalue
					if(attr=='opacity'){
						currvalue = Math.round(getStyleValue(obj,attr)*100)
					}else{
						currvalue = parseInt(getStyleValue(obj,attr))
					}

					//变速变量
					var speed = (json[attr]-currvalue)/8
					//做向上取整和向下取整处理
					speed = speed>0?Math.ceil(speed):Math.floor(speed)
					if(currvalue!=json[attr]){
						beclear = false
						if(attr=='opacity'){
							obj.style.filter = 'alpha(opacity:'+(currvalue+speed)+')'
							obj.style.opacity = (currvalue+speed)/100
						}else{
							obj.style[attr] = currvalue + speed + 'px'
						}

					}
				}

				if(beclear){
					clearInterval(obj.timer)
					callbackfun()
				}

			},30)
		}
	</script>
</body>
</html>

效果图：
在这里插入图片描述

Mr.ZKH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
完美运动框架展示

在多值运动框架上⾯考虑运动完之后传⼊回调函数注意改变透明度opacity需要做特殊处理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>完美运动框架展示</title> <style type="text/css">...
复制链接

扫一扫