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 相关文章推荐
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
node实现定时发送邮件的示例代码
Aug 26 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
JSON stringify方法原理及实例解析
Oct 23 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
php adodb操作mysql数据库
2009/03/19 PHP
linux命令之调试工具strace的深入分析
2013/06/03 PHP
php绘制一个扇形的方法
2015/01/24 PHP
设定php简写功能的方法
2019/11/28 PHP
jquery 插件开发备注
2010/08/27 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
Python深入学习之上下文管理器
2014/08/31 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
基于Python爬取fofa网页端数据过程解析
2020/07/13 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
九年级历史教学反思
2014/01/27 职场文书
劳动竞赛口号
2014/06/16 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
2015年维修工作总结
2015/04/25 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
导游词之包公祠
2019/11/25 职场文书
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis