js 元素运动的案列

萤火虫

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		html {
			height: 100%;
		}

		body {
			padding: 0;
			margin: 0;
			height: 100%;
			background: url(bg.jpg) no-repeat;
			background-size: cover;
		}

		img {
			width: 20px;
			position: absolute;
		}
	</style>
</head>

<body>

	<script>
		无论是在构造函数里还是在原型方法里,如果一个变量只在该方法体内部使用,用var,也称为私有属性
		但是一个变量不仅在构造函数里能访问,并且在原型方法里也能被访问到,就放到this上,变成实例属性
		//萤火虫要飞
		//1.先创建萤火虫类
		 function Fireworm() {
			//知道是萤火虫
			this.node = document.createElement("img");
			this.node.src = "1.jpg";
		}
		//萤火虫得有随机位置
		Fireworm.prototype.getRandPos = function () {
			var cw = document.documentElement.clientWidth; //可是区域的宽
			var ch = document.documentElement.clientHeight;
			var maxW = cw - 20;
			var maxH = ch - 20;

			this.x = Math.floor(Math.random() * maxW);
			this.y = Math.floor(Math.random() * maxH);

		}
		//萤火虫要显示
		Fireworm.prototype.show = function () {
			this.getRandPos();
			this.node.style.left = this.x + "px";
			this.node.style.top = this.y + "px";
			document.body.appendChild(this.node);
		}
		//萤火虫要飞
		Fireworm.prototype.fly = function () {
			this.getRandPos();
			startMove(this.node, {
				left: this.x,
				top: this.y
			}, () => {
				console.log(this);
				this.fly();
			});
		} 
	</script>
	<script>
	运动封装函数
	function startMove(domobj, json, fn) {
    clearInterval(domobj.timer);
    domobj.timer = setInterval(function () {
        var flag = true; //假设所有的属性都达到了目标值
        for (var attr in json) {
            var iTarget = json[attr]; //取到目标值
            if (attr == "opacity") { //透明度的处理
                var iCur = parseInt(getStyle(domobj, "opacity") * 100);
            } else {
                var iCur = parseInt(getStyle(domobj, attr)); //取到当前值
            }
            var iSpeed = (iTarget - iCur) / 8;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if (attr == "opacity") {
                domobj.style.opacity = (iCur + iSpeed) / 100;
                domobj.style.filter = "alpha(opacity=" + (iCur + iSpeed) + ")";
            } else {
                domobj.style[attr] = iCur + iSpeed + "px";

            }

            if (iTarget != iCur) { //只要有没达到的 flag为false
                flag = false;
            }
        }
        if (flag) { //只有在flag为true时才清定时器
            clearInterval(domobj.timer);
            if (fn) {
                fn();
            }
        }

    },50)
}

function getStyle(domobj, attr) {
    if (window.getComputedStyle) {
        return getComputedStyle(domobj, null)[attr];
    }
    return domobj.currentStyle[attr];
}
	</script>
	</body>
	</html>

下方是萤火虫图片
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值