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笔记一 js以及json基础使用说明
May 22 Javascript
Ajax 数据请求的简单分析
Apr 05 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
Feb 14 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 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+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
laravel批量生成假数据的方法
2019/10/09 PHP
JavaScript写的一个DIV 弹出网页对话框
2009/08/14 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
Python json模块使用实例
2015/04/11 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
通用自荐信范文
2014/03/14 职场文书
自我鉴定书
2014/03/24 职场文书
学习交流会主持词
2014/04/01 职场文书
励志演讲稿范文
2014/04/29 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
工作自我评价范文
2015/03/05 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
详细介绍python类及类的用法
2021/05/31 Python
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis