文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > js教程 > 正文

用JavaScript实现动画效果

高洛峰
发布： 2016-11-25 11:28:49
原创
1032人浏览过

大家在使用dreamweaver中的时间线功能或以做出很有趣的动画效果，dreamweaver会自动为用户生成特定的程序代码，大家有没有想过动画的实现原理呢？其实原理是很简单的，主要是使用了一个计时器函数，下面我为大家

演示一个简单的动画的制作过程，通过有关的介绍，大家可以举一反三，做出更多很炫的动画效果。

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

　　
　　


　　JavaScript Motion Sample

　　

立即学习“Java免费学习笔记（深入）”；

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

　　function stopMove()
　　{
　　 clearTimeout(movingID);
　　}
　　


　　


　　

　　
　　 
　　  
　　 
　　
I can moving...

　　

　　


　　
　　

　　　
　　
 

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

　　注意一点是如果要停止这个计时器，必须保存调用这个setTimeout()函数后的返回值，通过clearTimeout(id)函数来取消计时器。

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：JavaScript:基础继承机制 下一篇：JSON详细学习之JSON in JavaScript
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
js如何实现语音合成功能 js语音合成的4种调用方式 JavaScript实现语音合成的核心方法是使用WebSpeechAPI中的SpeechSynthesis接口。要检查浏览器是否支持语音合成，可使用if('speechSynthesis'inwindow)进行判断；创建并配置语音实例需通过SpeechSynthesisUtterance对象设置文本、语言、语速、音调和音量等参数；可通过speechSynthesis.getVoices()获取可用语音并动态生成选择列表；控制播放使用speak()、pause()、resume()和cancel(
2025-06-21 10:57:01
291
js如何获取当前时间戳 获取时间戳的4种实现方式解析 获取JavaScript当前时间戳的方法有：1.Date.now()，2.newDate().getTime()，3.newDate().valueOf()，4.+newDate()。其中Date.now()最推荐，兼容性好且简洁高效；其他方法虽语法不同但结果一致。时间戳转换为可读日期需借助Date对象，通过getFullYear、getMonth等方法获取年月日时分秒，或使用toLocaleDateString等格式化方法，也可借助第三方库如Day.js。时间戳用途广泛，包括生成唯一ID、缓存
2025-06-21 10:39:02
1002
js如何生成随机数 随机数生成的5种常用方法详解 JavaScript生成随机数的核心方法是Math.random()，但需根据需求进行扩展。生成指定范围整数用Math.floor(Math.random()(max-min+1))+min；生成浮点数则直接缩放偏移；正态分布可用Box-Muller变换；安全场景应使用WebCryptoAPI；从数组选元素则用Math.floor(Math.random()array.length)索引；提升质量可引入外部熵源或复杂算法，避免用时间戳作为种子。
2025-06-21 10:21:02
522
js怎么实现轮播图效果 js实现轮播图的5个关键步骤讲解 轮播图的实现主要包括HTML结构搭建、CSS样式设置、JS控制切换等步骤。1.HTML结构需要包含容器、图片列表、指示器和控制按钮；2.CSS需设置容器尺寸、隐藏溢出内容并使用flex布局排列图片，同时添加过渡动画；3.JS通过修改transform属性实现图片切换，并控制指示器状态同步更新；4.可添加自动轮播功能，使用setInterval定时切换图片；5.为提升交互体验，可添加触摸滑动支持，通过监听touchstart、touchmove、touchend事件实现滑动手势识别；6.性能优化方
2025-06-20 22:33:02
588
js如何控制音频播放 js音频播放控制的4个核心API详解 要控制JavaScript中的音频播放，核心是利用HTML5的元素及其API。1.创建并获取元素；2.使用play()和pause()控制播放与暂停；3.通过volume属性调整音量；4.利用currentTime属性获取或设置播放时间；5.监听ended、timeupdate等事件；6.使用muted属性实现静音控制；7.设置loop属性实现循环播放；8.监听error事件处理加载错误；9.通过渐变volume值实现淡入淡出效果；10.使用标签或多格式支持实现浏览器兼容性。
2025-06-20 22:24:01
804
js如何实现数字滚动效果 数字动态增长动画实现 数字滚动效果的核心实现方式是使用JavaScript，主要有三种方法：1.使用requestAnimationFrame结合数学计算，性能好且控制灵活；2.利用CSSTransitions/Animations实现简单效果；3.使用第三方库如countUp.js，方便但依赖外部资源。推荐第一种方法，通过animateNumber函数在指定时间内平滑更新数字值，结合缓动函数（如easeOutQuad）提升自然度，并可通过调整动画时长、数字格式和颜色优化观感。处理精度问题可采用先放大再缩小的四舍五入
2025-06-20 20:48:02
842
js怎样实现图表数据展示 使用ECharts实现动态数据可视化 ECharts是一个强大的JavaScript图表库，能实现各种数据可视化效果。首先，引入ECharts库到HTML文件中，接着创建DOM容器，使用echarts.init()初始化实例，并通过配置option对象设置图表参数，最后调用myChart.setOption()渲染图表；其次，动态更新数据可通过setInterval()定时修改数据并重新渲染；此外，ECharts提供丰富的图表类型，如折线图展示趋势、柱状图比较类别、饼图显示比例、散点图表现关系等；用户还可通过修改option对象自定
2025-06-20 19:48:02
983
js如何检测用户是否离线 判断网络状态的4种检测技巧！ JavaScript检测用户是否离线主要通过以下方法：1.使用navigator.onLine属性，返回布尔值表示浏览器能否检测到网络连接，但无法确保可访问互联网；2.监听online和offline事件，实时响应网络状态变化；3.利用fetch或XMLHttpRequest发送请求验证真实联网能力；4.结合ServiceWorker实现离线缓存与请求拦截；5.针对间歇性网络连接，采用指数退避重试、设置请求超时、本地缓存等策略提升体验；6.克服navigator.onLine局限性可通过定期请求
2025-06-20 18:15:02
952
js安全xss防御措施_js安全xss防护方法详解 XSS防御的核心在于划分信任边界并严格校验用户输入。1.输入验证是第一道防线，应采用白名单限制输入类型、设置长度限制，并过滤或转义特殊字符，可借助HTMLPurifier等成熟库处理恶意HTML代码。2.输出编码同样关键，需根据输出位置选择不同编码方式：HTML编码用于网页内容、JavaScript编码用于脚本、URL编码用于链接、CSS编码用于样式。3.内容安全策略（CSP）通过HTTP头或meta标签限制资源加载来源，如限制脚本仅来自可信域名、禁止内联脚本、启用报告模式监控违规行为。4.其他
2025-06-20 17:15:01
941
JS怎么实现前端拖拽上传 5行代码完成拖放文件上传功能 拖拽上传的核心在于监听dragenter、dragover、drop事件并阻止默认行为，随后读取文件并通过XMLHttpRequest或fetch上传。具体步骤为：1.获取drop区域并绑定事件；2.阻止默认浏览器行为；3.添加高亮与非高亮样式反馈；4.读取拖入的文件列表；5.使用FormData和XMLHttpRequest逐个上传文件。优化用户体验可从视觉反馈、进度条显示、文件类型校验、错误提示等方面入手。处理大文件需采用分片上传、WebWorker或第三方库。兼容性方面应检测API支持情况
2025-06-20 17:03:02
854
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部