<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. JavaScript split()

    http://www.w3school.com.cn/jsref/jsref_split.asp

  2. Material 字体样式与排版

    Material 字体样式与排版 Google Material 设计规范文档 Style– Typography 字号 再好的布局也会被过多的字号和样式会毁掉.要规定好在这个布局上合适的 字号集合 ...

  3. SQL Server 2005中的分区表(三):将普通表转换成分区表

    在设计数据库时,经常没有考虑到表分区的问题,往往在数据表承重的负担越来越重时,才会考虑到分区方式,这时,就涉及到如何将普通表转换成分区表的问题了. 那么,如何将一个普通表转换成一个分区表 呢?说到底, ...

  4. android R 文件生成不了

    在android中比较头疼的是R文件生成不了.今天总结一下R文件生成不了的一些原因和解决方法 1. xml文件有错, 如果在res文件中的xml文件有错,android不会自动生成R文件,此时仔细查看 ...

  5. 给一组a标签当前页a标签加class

    <script type="text/javascript"> $(document).ready(function(){ $(".links .topbg_ ...

  6. C#如何获得本地电脑IP

    using System; using System.Collections.Generic; using System.Text; using System.Net;   //需要引用.Net命名空 ...

  7. OpenGL ES 2.0 光照

    基本的光照 光照分成了3种组成元素(3个通道):环境光.散射光以及镜面光. 材质的反射系数实际指的就是物体被照射处的颜色,散射光强度指的是散射光中的RGB(红.绿.蓝)3个色彩通道的强度. 环境光 指 ...

  8. paip.使用WORD进行拆分段落单个汉字转表格.txt

    paip.使用WORD进行拆分段落单个汉字转表格.txt 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn ...

  9. CSS优先级、引入方式、Hack

    优先级 important > 内联(1,0,0,0) > id(1,0,0) > class(1,0) > element(1) > *通配符 css引入方式 方式一: ...

  10. WordPress插件制作教程(八): 最后总结

    WordPress插件教程最后一篇,还是为大家简单的做下总结.这次插件制作教程讲的内容和知识点个人觉得不是很多,因为插件制作不单单是这些内容,它涉及的知识很多很多,不是说你会一些函数就可以做出一个好的 ...