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 相关文章推荐
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
vuejs指令详解
Feb 07 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 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 禁止页面缓存输出
2009/01/07 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php计算年龄精准到年月日
2015/11/17 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
Vue AST源码解析第一篇
2017/07/19 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
Python解析最简单的验证码
2016/01/07 Python
Win7下Python与Tensorflow-CPU版开发环境的安装与配置过程
2018/01/04 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
生物化工工艺专业应届生求职信
2013/10/08 职场文书
高中生评语大全
2014/04/25 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
2014年司法所工作总结
2014/11/22 职场文书
挂职锻炼个人总结
2015/03/05 职场文书