<script>
//窗体载入,为div控件绑定事件
window.onload = function () { var div1 = document.getElementById('div1');
//mouseover
div1.onmouseover = function () {
startMove(0);
}
//mouseout
div1.onmouseout = function () { startMove(-100);
}
}
//定义定时器
var timer = null;
//淡入和淡出
function startMove(targetPoint) { clearInterval(timer);
var div1 = document.getElementById('div1'); timer = setInterval(function () { var ispeed = 0;
if (div1.offsetLeft < targetPoint) { ispeed = 10;
}
else { ispeed = -10;
}
//控件位置
if (div1.offsetLeft == targetPoint) {
clearInterval(timer);
}
else { div1.style.left = div1.offsetLeft + ispeed + "px";
}
},30); }
</script>

javascript运动功能-分享到的更多相关文章

  1. 原生JavaScript运动功能系列(五):定时定点运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...

  2. 原生JavaScript运动功能系列(四):多物体多值链式运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 多物体多值链式 ...

  3. 原生JavaScript运动功能系列(二):缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

  4. 原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现

    在我们日常生活中运动就是必不可少的部分,走路.跑步.打篮球等.在网页交互设计上运动也是必不可少的部分,创建的网站交互设计运动模块有轮播图,下拉菜单,还有各种炫酷的游戏效果都跟运动密切相关.所以很重要, ...

  5. 原生JavaScript运动功能系列(三):多物体多值运动

    多物体同时出发运动函数实现 多属性同步运动变化实现 一.多物同时触发运动函数实现 前面两个动画示例基本理解了动画的核心:位置变化和速度变化,操作的核心就是定时器分段叠加属性值.但是动画还是基于单个元素 ...

  6. 好程序员技术教程分享JavaScript运动框架

    好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...

  7. javascript运动系列第一篇——匀速运动

    × 目录 [1]简单运动 [2]定时器管理 [3]分享到效果[4]移入移出[5]运动函数[6]透明度[7]多值[8]多物体[9]回调[10]函数完善[11]最终函数 前面的话 除了拖拽以外,运动也是j ...

  8. Popmotion – 小巧,灵活的 JavaScript 运动引擎

    Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪.原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用.Popmoti ...

  9. 20个免费的 JavaScript 游戏引擎分享给开发者

    这篇文章收集了20个免费的 JavaScript 游戏引擎分享给开发者.这些游戏引擎能够帮助游戏开发人员更快速高效的开发出各种好玩的游戏. 使用 HTML5.CSS3 和 Javascript 可以帮 ...

随机推荐

  1. Jquery:强大的选择器<二>

    今天跟着资料做了一个示例,为什么我感觉自己做的没书上的好看呢?好吧,我承认自己对css样式只懂一点皮毛,我也不准备深度的去学习它,因为……公司有美工嘛! 这个小示例只是实现了元素的隐藏和显示.元素cl ...

  2. Java中书写要注意的地方

    Java的命名规则:以字母.下划线(_)或$符号开头,其后跟任意数目的字母.数字.下划线和$符号.  注意: 数字不能作为标识符的开头: 除了下划线与$符号以外,其余的符号不能使用: 不能使用关键字作 ...

  3. 本地开发时同时启动多个tomcat服务器

    1.环境变量中不要设置CATALINA_HOME: 2.分别修改安装目录下的conf子目录中的server.xml文件: a.修改http访问端口(默认为 8080端口),将8080修改为tomcat ...

  4. 翻译一篇SpiderMonkey GC的文章

    前言 这篇文章包含了对SpiderMonkey中Rooted<T>, Handle<T>的解释. 翻译自 https://developer.mozilla.org/en-US ...

  5. CODEVS 1066/洛谷 P1514引水入城

    1066 引水入城 2010年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond   题目描述 Description 在一个遥远的国 ...

  6. www

    dddd int vec_rotate(char *vec,int rotdist, int length) { int i,j,k,times; char t; times = gcd(rotdis ...

  7. 基于jQuery简单实用的Tabs选项卡插件

    jQuery庞大的插件库总是让人欢喜让人忧,如何从庞大的插件库里挑出适合自己的插件,总是让很多缺少经验的朋友头疼的事!今天为大家推荐几款简单实用的Tabs选项卡插件,推荐理由:简单易用灵活,样式美观, ...

  8. php的一些小笔记-文件函数(3)

    文件的写入和读取 1 . 文件的读取 1, file_get_contents 函数是用来将文件的内容读入到一个字符串中的首选方法    结果

  9. WordPress插件制作教程(三): 添加菜单的方法

    上一篇编写了一个简单的插件,让大家对插件的简单制作有个了解,这一篇我们在更深一步,当我们激活插件后后台会显示菜单出来,然后通过单击菜单显示自己定义好的信息.激活之后会在WordPress后台显示一个菜 ...

  10. 使用注解@Transient使表中没有此字段

    注意,实体类中要使用org.springframework.data.annotation.Transient 在写实体类时发现有加@Transient注解的 加在属性声明上,但网上有加到get方法上 ...