这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现物体带缓冲的间歇运动效果, 可实现物体定时间歇运动的功能, 涉及 javascript 定时器、数学运算及页面元素动态修改的相关操作技巧, 需要的朋友可以参考下
本文实例讲述了 JS 实现物体带缓冲的间歇运动效果。分享给大家供大家参考,具体如下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="content-type" charset="utf-8" />
- <meta http-equiv="content-type" content="text/html" />
- <title>
- demo
- </title>
- </head>
- <body>
- <div id="odiv" style="position:absolute;width:200px;height:100px;background:red;left:0;border:1px solid #333;">
- </div>
- <script type="text/javascript">
- var odiv = document.getElementById('odiv');
- odiv.onmouseover = function() {
- move(this, 'width', 500,
- function() {
- move(odiv, 'left', 300,
- function() {
- move(odiv, 'height', 500,
- function() {
- move(odiv, 'borderWidth', 10)
- });
- });
- });
- }
- function move(obj, arr, target, fn) {
- clearInterval(obj.dt);
- obj.dt = setInterval(function() {
- obj.ol = parseInt(obj.style[arr]);
- if (obj.ol == target) {
- clearInterval(obj.dt);
- if (fn) fn();
- } else {
- obj.speed = (target - obj.ol) / 8;
- obj.speed > 0 ? obj.speed = Math.ceil(obj.speed) : obj.speed = Math.floor(obj.speed);
- obj.style[arr] = obj.ol + obj.speed + "px";
- }
- },
- 30);
- }
- </script>
- </body>
- </html>
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0602/329293.html