js 元素运动的案列

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量184 收藏
点赞数
文章标签： javascript css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html5_javascript/article/details/107819106
版权

萤火虫

<!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>

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

无奈html5
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现运动logo图片效果及运动元素对象sportBox使用方法
10-27
在JavaScript中，创建动态效果，如运动logo图片效果，通常涉及到对DOM元素的操作以及使用定时器来实现连续的动画帧。在这个场景中，`sportBox`是一个自定义的对象，用于管理元素的运动行为。它具有初始化方法和一些...
JS版元素周期表实现方法
10-23
在本文中，我们将探讨如何使用JavaScript（JS）来实现一个元素周期表的动态展示。这个周期表不仅能够显示元素的基本信息，还支持用户交互，即当用户点击元素时，会在下方详细显示该元素的属性。这是一个很好的实践...
Js运动
weixin_44928961的博客
02-22 3029
JavaScript之Js运动 在我们进行web开发的过程中，为了与用户进行更加友好、有趣的交互，拥有一套完美的运动框架就能轻松解决。 这次就给大家带来Javascript学习中Js运动的编写和注意事项。实现运动的思想很简单，首先对这个元素获取定位，然后通过改变该元素的left值和top值或者透明度，通过定时器就可以实现元素的运动效果。 Js运动代码编写的过程，基本步骤如下： 1、关闭上一次定时器...
js 弹性运动案例
weixin_42448623的博客
09-19 155
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>弹性案例</title> <style> ul{ positi
JS操作元素运动的简单封装
哈哈哈
02-11 353
JS操作元素运动的简单封装 JS操作元素运动的简单封装。 在之前介绍定时器的时候也介绍了一些JS中运动的知识。就是利用定时器来操作元素运动。我们来系统总结下JS中的运动知识。 1、简单运动实现 先看实现过程，然后分析代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
js运动（三）—— 多元素的运动
蜡笔小达新的博客
05-07 314
本文以元素的单一属性变化为切入点，介绍适用于所有元素、所有属性运动的缓动函数的开发过程和思路。针对实际开发过程遇到的一些问题，引申出知识点。
原生js实现元素的运动的两种方法
峰会路转的博客
05-05 283
首先来看下效果，点击按钮div开始运动 html <input type="button" value="动起来" /> <div id="div1"></div> css #div1 { width: 100px; height: 100px; background-color: red; position: absolute; /* 物体运动必须要加绝对定位 .
前端JavaScript运动框架move.js
11-12
前端JavaScript运动框架move.js,有需要的友友可以自行下载使用。
前端JavaScript运动框架Tween.js
11-12
前端JavaScript运动框架Tween.js
元素周期表-three.js实战详解
05-17
这个资源是我自己在CSDN上的视频课程的源代码，课程地址：https://download.csdn.net/course/detail/31799 版权所有，盗版或者拷贝在互联网上传播者，会通过法律途径起诉 购买源代码者，如果有不懂的地方可以私信...
如何让JavaScript元素运动起来 ？
weixin_30949361的博客
05-30 102
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #div1 { 8 ...
原生js封装元素运动函数
翾的博客
12-22 1128
首先看看演示效果 代码, 函数参数obj为当前想要变动的元素, changeData为想要变动的种类, 例如, func为元素动作结束后想要处理的函数例如向上面那个演示, 注意: opacity要乘以100, 原因见如下代码var div = document.getElementsByClassName('demo')[0]; startMove(div, {width:200 ,
JS任意元素的任意值运动
_ACME_的博客
06-14 1103
函数原型startMove(obj,name,iTag); 例如: startMove(obj,’width’,400);//width运动到width:400px startMove(obj,’height’,400);//height运动到height:400px startMove(obj,’opacity’,100);//透明度变到100(不透明)
js用类的方法写萤火虫和组合创建的方法写萤火虫
大佐
08-16 250
上面两张为素材图 方法一：类的方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html{ height: 100%; } body...
H5元素拖拽效果
baidu_38027860的博客
03-16 1357
需引入hammer.min.js库/*拖拽效果*/ //获取相关CSS属性    var getCss = function(o,key){        return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];       };     ...
js往返运动
素描本里的男子的博客
05-11 595
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ height: 100px; ...
html里水平运动实现,HTML+JavaScript实现链式运动特效
weixin_35523284的博客
06-18 146
在学习js的过程中，发现这家伙做特效真是不错，尽管说眼下水平还不够，只是也能写点简单的效果。今天分享一个简单的运动框架。然后利用这个框架实现简单的链式运动特效。1.move.js在运动框架中。主要进行长宽变化和透明度的变化。长宽的变化能够实现DIV的体积运动变化效果。透明度的话主要是在鼠标移入移出事件中加入淡入淡出的效果。我将这个简单的运动框架封装到一个单独的js文件里，方便调用。先看看代码：//...
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 56
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
js事件循环机制案列展示
06-09
下面是一个简单的例子，演示了JavaScript事件循环机制的执行顺序： ``` console.log('start'); setTimeout(function() { console.log('setTimeout'); }, 0); Promise.resolve().then(function() { console.log('Promise'); }); console.log('end'); ``` 在这个例子中，我们先输出了一个 `start`，然后添加了一个 `setTimeout` 函数和一个 `Promise` 对象。最后，我们又输出了一个 `end`。 根据JavaScript事件循环机制的执行顺序，首先执行同步任务阶段，输出 `start` 和 `end`，然后执行微任务阶段，输出 `Promise`，最后执行宏任务阶段，输出 `setTimeout`。 因此，最终的输出结果是： ``` start end Promise setTimeout ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值