用JavaScript实现动画效果

最新推荐文章于 2023-10-10 15:18:46 发布
最新推荐文章于 2023-10-10 15:18:46 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： Web 文章标签： javascript dreamweaver function div button input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/maxchou/article/details/4168
版权

主页: http://www.maxss.net
Email: maxss.net@163.com

　　大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果，Dreamweaver会自动为用户生成特定的程序代码，大家有没有想过动画的实现原理呢？其实原理是很简单的，主要是使用了一个计时器函数，下面我为大家演示一个简单的动画的制作过程，通过有关的介绍，大家可以举一反三，做出更多很炫的动画效果。我的个人主页v3里动画效果就全部是自己用JavaScript编写。

　　这个实例的效果是点击网页上的“开始移动”按钮，则其中的指定图层就会从左到右移动，在这个过程中你点击“停止移动”按钮就会停止移动。

<html>
<head>
<title>JavaScript Motion Sample</title>

<script language="JavaScript">
var movingID = null;
var scrolling = false;

function startMove()
{
	var left = eval(div1.style.left.replace("px", ""));
	if (left < document.body.scrollWidth - 150)
		div1.style.left = left + 1;
	else
		div1.style.left = 10;
	movingID = setTimeout("startMove()", 10);
}

function stopMove()
{
	clearTimeout(movingID);
}
</script>

</head>
<body>
<div id="div1" style="visibility:visible; position:absolute; left:10; top:10; z-index:1;">
	<table bgColor="#FFFFCC" border="1"cellPadding="0" cellSpacing="0">
		<tr>
			<td>I can moving...</td>
		</tr>
	</table>
</div>

<br><br>
<input type="button" value="开始移动" onClick="startMove()">
<input type="button" value="停止移动" onClick="stopMove()">

</body>
</html>

　　这里主要使用了一个叫setTimeout(function, interval)函数，这个函数的参数格式为：
　　第一个参数“function”为超时后调用的函数名，第二个参数“interval”为超时值，以微秒为单位。

　　注意一点是如果要停止这个计时器，必须保存调用这个setTimeout()函数后的返回值，通过clearTimeout(id)函数来取消计时器。
MAX°孟兆
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js动画(animate)简单引擎代码示例
01-21
用惯了jquery的同学,相信都很欣赏其动画引擎。确实相对比较完善！如果，如果想像力足够丰富的话，相信可以做出超出想像的效果。当然，跟2d库比起来，还是相差相当一段距离。jquery压根也不是专门为动画而设计的。模拟真实世界方面，还是不足的。但在web世界里还是游刃有余的。动画其实一直是flash的专属领地(web区哉)。只是它常常沦为黑客攻击的漏洞所在，而且要装插件，有时候文件实在太大，而且性耗实在是高啊。html5出现后，其实adobe自己都转移阵地到html5了。当然，我觉得很长一段时间内,flash是不会被放弃的。 长话短说，步入正题。仿照flash的动画原理，自己写了一个非常简单的j
JavaScript 动画效果的实现（附带示例）
Itmastergo的博客
01-29 1575
JavaScript 动画主要是通过修改元素样式来实现的，能够实现许多 CSS 动画所不能实现的效果，例如暂停、回放等。
400多个JavaScript特效大全
xwdev的专栏
08-23 4122
<br /><br />400多个JavaScript特效大全，包含全部源代码和详细代码说明，不可多得 <br />JavaScript实现可以完全自由拖拽的效果，带三个范例     http://www.sharejs.com/showdetail-501.aspx <br />javascript实现可以自由拖动的树形列表     http://www.sharejs.com/showdetail-500.aspx <br />带模块编辑功能拖拽效果实现     http://www.sharejs.c
JavaScript与动画效果
最新发布
吃不胖.
10-10 102
否则，将DIV元素的opacity属性设置为透明度值，将filter属性设置为alpha(opacity=透明度值*100)，并将透明度值逐渐减小。定义slide动画以在2秒内完成，设置ease-in-out动画效果，并设置infinite和alternate属性来使动画无限循环并往返运动。在JavaScript中，创建一个名为fade()的函数，在其中使用getElementById()方法获取DIV元素的引用。使用JavaScript可以调整元素的位置和缩放比例，从而创建弹跳效果。
3.3 Js设置网页动画效果（案例3）
小脆筒style的博客
06-17 271
Js设置网页动画效果（案例3） 制作按时间随机变换网页背景页面 index.html <html> <head></head> <body> <script language="javascript"> var now = new Date(); var hour = now.getHours(); if (hour >= 0 &amp
基于js的炫酷动画的代码
liujie_5201314的博客
11-10 528
基于js的炫酷动画的代码
【JavaScript-动画原理】如何使用js进行动画效果的实现
zhaochen1127的博客
09-25 1万+
利用js实现动画效果
超级绚丽，js前端动画特效，轰炸你的眼睛
2301_77478553的博客
07-05 687
超级绚丽，js前端动画特效，轰炸你的眼睛
JavaScript实现动画效果
One of thre_tigers的博客
01-25 7079
动画基础 (1)位置 (2)时间 (3)设置时间增量 (4)抽象 用动画增强网页效果 (1)设置动画 (2)变量作用域 (3)改进 (4)生成HTML标记添加安全检查
JavaScript 动画效果
xiangxiongfly
06-10 7220
文章目录JS动画实现概述平滑动画无缝连续滚动特效轮播图轮播图淡入淡出效果 JS动画实现 概述 在CSS3中可以通过transition过渡属性可以实现动画 JS可以利用CSS3中的transition属性实现元素动画 平滑动画 利用CSS transition属性实现平滑动画效果 <button>开始动画</button> <div id="box"></div> <script> var btn = document.queryS
分享112个JS特效动画效果，总有一款适合您
adendean的博客
02-05 341
JS
使用js实现简单的动画效果
m0_61685348的博客
09-25 2302
下面给大家分享一下，js实现打地鼠中地鼠的上下运动的动画效果 1.首先准备好一套渐进的图片 （实现原理，注意图片后面的数字为有序的，也可以自己改，而且我们想要切换图片时，通过改变h后面的数字就可以实现了） 2.创建一个img，并用js获取他的对象，用于装我们的图片（这里通过id获取，） ...
JS动画案例
08-04
完美动画框架，能实现日常常用动画效果。
常见JS动画效果
热门推荐
lavendersue的博客
09-27 2万+
作为一名前端开发人员，想要的大多都是，在开发过程中，看着自己制作的动画的炫酷以及困难的解决；开发结束后，自己的项目、成果可以被他人认可接受。人们浏览网页时，若一个网页动画效果丰富炫酷，性能良好，体验度良好，自然会受到吸引去打来浏览。吸引用户，自然少不了网页的布局优美、色彩搭配的恰当，更重要的是其中吸引人的炫酷动画效果。
js实现缓动动画
zl13015214442的博客
04-20 992
我们都知道实现动画的原理就是：盒子未来的位置 = 盒子当前的位置+步长。那么缓动动画实现就是步长越来越小。盒子慢慢停下的效果。根据这个原理实现一个缓动的效果： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;
给你的网页添加动画效果
kaikai4的专栏
07-21 2215
当我们使用CSS3动画时，我们经常讨论如何使用过渡，动画等实战方法。然而动画的强大之处不是集中在单个动画是如何工作的，而是多个动画结合起来，创造出令人震撼的效果。良好的动画设计可以使我们的作品脱颖而出。 Disney的 动画的12个基本原则 定义“感染力”为“一个演员的迷人之处。” 它是描述如何使用虚实，风格，和动画的物质叠加起来创建生动的角色，使得观众觉得真实而有趣。 《动画的12个
javascript写字技巧_js canvas实现写字动画效果
06-13
可以使用HTML5中的Canvas元素和JavaScript来实现写字动画效果。具体实现步骤如下： 1. 创建一个Canvas元素，并设置它的宽度和高度。 2. 使用JavaScript获取Canvas的上下文对象。 3. 设置字体、颜色、阴影等样式属性。 4. 使用Canvas的beginPath()方法开始绘制路径。 5. 使用Canvas的moveTo()和lineTo()方法绘制字母路径。 6. 使用Canvas的stroke()方法绘制路径。 7. 使用JavaScript的定时器函数setInterval()不断更新字母的位置，从而实现动画效果。 下面是一个简单的示例代码： HTML代码： ```html <canvas id="myCanvas" width="500" height="200"></canvas> ``` JavaScript代码： ```javascript // 获取Canvas元素的上下文对象 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 设置字体属性 ctx.font = "80px Arial"; ctx.fillStyle = "red"; ctx.shadowColor = "black"; ctx.shadowBlur = 10; // 定义字母路径 ctx.beginPath(); ctx.moveTo(50, 100); ctx.lineTo(100, 50); ctx.lineTo(150, 100); ctx.lineTo(200, 50); ctx.lineTo(250, 100); ctx.lineTo(250, 150); ctx.stroke(); // 定义定时器函数来更新字母位置 var x = 50; var y = 100; var dx = 5; var dy = -5; setInterval(function() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x+50, y-50); ctx.lineTo(x+100, y); ctx.lineTo(x+150, y-50); ctx.lineTo(x+200, y); ctx.lineTo(x+200, y+50); ctx.stroke(); x += dx; y += dy; if (x > canvas.width-200 || x < 0) { dx = -dx; } if (y > canvas.height-50 || y < 0) { dy = -dy; } }, 10); ``` 这段代码实现了一个不断移动的字母路径，可以根据需要修改字母的形状和动画效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MAX°孟兆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值