JavaScript 图片在规定时间内消失

最新推荐文章于 2021-08-19 10:41:37 发布

ttcyan

最新推荐文章于 2021-08-19 10:41:37 发布

阅读量383

点赞数 1

本文链接：https://blog.csdn.net/cyanciel/article/details/53997296

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<title>运动效果</title>
		<meta charset="utf-8" />
	</head>
	<style>
		div {
				width: 200px;
				height: 200px;
				background: red;
				opacity: 1;
			}
	</style>
	<script>
		window.onload = function(){
			//获取DIV的相关内容
			var oDiv = document.getElementsByTagName('div')[0];
			//设置鼠标点击事件
			oDiv.onclick = function (){
				//1秒内使得oDiv对象的opacity属性的值变成0
				simpleAnimation(this,'opacity',0,1000);
			}
			function simpleAnimation (obj,attr,target,time){
				//获取刚开始的属性
				var start = parseFloat(getStyle(obj,attr));
				//计算变化量
				var delta = target - start;
				//计算变化的总次数(向上取整)
				var total = Math.ceil(time / 30);
				//记录当前变化是第几次变化
				//如果当前变化已经是最后一次，那么
				//就要使得变化直接变成最终结果
				var count = 0;
				
				var timer = setInterval(function(){
					var unit = 'px';
					//当属性值为opacity透明度的时候，我们是不需要px的
					if (attr == 'opacity'){
						unit = '';
					}
					//变化次数+1
					count++;
					//如果已经是最后一次变化了
					if (count == total) {
						obj.style[attr] = target + unit;
						clearInterval(timer);
						timer = null;
					} else {
						obj.style[attr] = start + delta*count/total + unit;
					}
				},30);
			}
			//获取某个对象的某个属性
			function getStyle(obj,attr){
				if(typeof(obj.currentStyle) == 'undefined'){
					return getComputedStyle(obj,null)[attr];
				} 
				return obj.currentStyle[attr];
			}
		}
	</script>
	<body>
		<div></div>
	</body>
</html>

ttcyan

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 图片在规定时间内消失

运动效果 div { width: 200px; height: 200px; background: red; opacity: 1; } window.onload = function(){ //获取DIV的相关内容 var oDiv = document.getElementsByTagName('div')[
复制链接

扫一扫

专栏目录