js简单实现点击左右运动的方法


Posted in Javascript onApril 10, 2015

本文实例讲述了js简单实现点击左右运动的方法。分享给大家供大家参考。具体分析如下:

这里可实现点击向右,方块向右移动,点击向左,方块向左移动的效果

可以用setInterval来实现过多长时间,div移动多长的距离来实现运动效果。

要点一:如果元素的左边距离小于目标距离,则是正向移动,否则是负向移动

if(run.offsetLeft <target){
speed = 2;
}else{
speed = -2;
}

要点二:如果元素的左边距离等于目标距离,停止定时器,否则,元素的左边距离等于现在的左边距离加上速度值。

if(run.offsetLeft ==target){
clearInterval(timer);
}
else{
run.style.left = run.offsetLeft +speed +"px";
}

上代码

<!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=utf-8"/>
<title>无标题文档</title>
<style>
body{margin:0; padding:0;}
#run{width:100px; height:100px; background:#06c;
position:absolute; border:1px solid #000;
left:0;}
</style>
<script>
window.onload = function(){
 var run = document.getElementById("run");
 var btn = document.getElementById("btn");
 var btn1 = document.getElementById("btn1");
 var speed = 2;
 var timer = null;
 btn.onclick = function(){
  startrun(300);
 }
 btn1.onclick = function(){
  startrun(0);
 }
 function startrun(target){
   clearInterval(timer);
  timer = setInterval(function(){
   if(run.offsetLeft <target){
    speed = 2;
   }else{
    speed = -2;
   }
   if(run.offsetLeft ==target){
    clearInterval(timer);
   }
   else{
    run.style.left = run.offsetLeft +speed +"px";
   }
  },30)
 }
}
</script>
</head>
<body>
<input id="btn" type="button" value="运动向右">
<input id="btn1" type="button" value="运动向左">
<div id="run"></div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
js获取视频时长代码
Apr 10 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
Feb 16 Javascript
js实现透明度渐变效果的方法
Apr 10 #Javascript
js实现同一页面多个运动效果的方法
Apr 10 #Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 #Javascript
js实现缓冲运动效果的方法
Apr 10 #Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 #Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 #Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 #Javascript
You might like
轻松修复Discuz!数据库
2008/05/03 PHP
php 页面执行时间计算代码
2008/12/04 PHP
php设计模式 Builder(建造者模式)
2011/06/26 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
微信小程序 五星评分的实现实例
2017/08/04 Javascript
Express之托管静态文件的方法
2018/06/01 Javascript
layDate日期控件使用方法详解
2018/11/15 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
django使用django-apscheduler 实现定时任务的例子
2019/07/20 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
python让函数不返回结果的方法
2020/06/22 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
教学改革实施方案
2014/03/31 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
保护环境倡议书
2014/04/14 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
满月酒邀请函
2015/01/30 职场文书
商务宴会祝酒词
2015/08/11 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python