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 相关文章推荐
Javascript 日期对象Date扩展方法
May 30 Javascript
写出更好的JavaScript程序之undefined篇(中)
Nov 23 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
jquery数组之存放checkbox全选值示例代码
Dec 20 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
JavaScript多线程详解
Aug 12 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
React数据传递之组件内部通信的方法
Dec 31 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
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
日期函数扩展类Ver0.1.1
2006/09/07 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
简单实现js浮动框
2016/12/13 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
node.js中express-session配置项详解
2017/05/31 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
小程序如何定位所在城市及发起周边搜索
2020/02/11 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
python实现烟花小程序
2019/01/30 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
市场营销专业毕业生自荐信
2013/11/02 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
房地产财务管理制度
2014/02/02 职场文书
大专护理专业自荐信
2015/03/25 职场文书
污染环境建议书
2015/09/14 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis