JS匀速运动演示示例代码


Posted in Javascript onNovember 26, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>匀速运动演示</title> 
<style type="text/css"> 
<!-- #div1 {width:1px;height:200px;background-color: black;position:absolute;left:100px;top:70px;float:left} 
#div1 span {position:absolute;top:-15px} 
#div2 {width:1px;height:200px;background-color:midnightblue;position:absolute;left:800px;top:70px;float: left} 
#div2 span {position:absolute;top:-15px} 
#div3 {width:1px;height:200px;background-color:fuchsia;position:absolute;left:300px;top:70px;float: left} 
#div3 span {position:absolute;top:-15px} 
#div4 {width:1px;height:200px;background-color:darkmagenta;position:absolute;left:500px;top:70px;float: left} 
#div4 span {position:absolute;top:-15px} 
#grap {width:200px;height:200px;background:red;position:absolute;left:300px;top:74px;float: left;} 
input {width:100px;margin-left: 90px;} 
--> 
</style> 
<script type="text/javascript"> 
var timeId 
function startMove(target){ 
var oDiv=document.getElementById('grap') 
clearInterval(timeId); //这个地方就是为了防止多次点击速度加快的现象,很重要 
speed=oDiv.offsetLeft<target?8:-9; 
timeId=setInterval(function(){ 
if(Math.abs(oDiv.offsetLeft-target)<=6){ 
oDiv.style.left=target+'px'; //只要矩形移动到接近到目标点处就直接移动到目标点上,肉眼无法察觉速度变化 
clearInterval(timeId); document.title="目标"+oDiv.style.left; 
} 
else{ 
oDiv.style.left=oDiv.offsetLeft+speed+'px'; 
} 
},30); 
} 
</script> 
</head> 
<body> 
<div id="div1"><span>100px</span></div> 
<div id="div2"><span>800px</span></div> 
<div id="div3"><span>300px</span></div> 
<div id="div4"><span>500px</span></div> 
<input type="button" value="移动到100px处" onclick="startMove(100)"/> 
<input type="button" value="移动到300px处" onclick="startMove(300)"/> 
<input type="button" value="移动到500px处" onclick="startMove(500)"/> 
<input type="button" value="移动到800px处" onclick="startMove(800)"/> 
<div id="grap" ></div> 
</body> 
</html>
Javascript 相关文章推荐
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
小程序表单认证布局及验证详解
Jun 19 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 #Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 #Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 #Javascript
JS判断不能为空实例代码
Nov 26 #Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 #Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 #Javascript
键盘KeyCode值列表汇总
Nov 26 #Javascript
You might like
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
PHP获取网址的顶级域名函数代码
2012/09/24 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
Vue监听数组变化源码解析
2017/03/09 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
Typescript的三种运行方式(小结)
2019/09/18 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python断言assert的用法代码解析
2018/02/03 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
写给女生的道歉信
2014/01/14 职场文书
《称象》教学反思
2014/04/25 职场文书
金融与证券专业求职信
2014/06/22 职场文书
模具专业求职信
2014/06/26 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python