编程 Javascript

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程序设计有所帮助。

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

- Author -

jingangel

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 读取XML数据，在页面中展现、编辑、保存的实现

Oct 27 Javascript

JavaScript包装对象使用介绍

Aug 29 Javascript

教你用AngularJS框架一行JS代码实现控件验证效果

Jun 23 Javascript

javascript动态修改Li节点值的方法

Jan 20 Javascript

javascript每日必学之封装

Feb 23 Javascript

JavaScript接口的实现三种方式(推荐)

Jun 14 Javascript

canvas滤镜效果实现代码

Feb 06 Javascript

JS实现不用中间变量temp 实现两个变量值得交换方法

Feb 04 Javascript

浅谈实现vue2.0响应式的基本思路

Feb 13 Javascript

react build 后打包发布总结

Aug 24 Javascript

jquery css实现流程进度条

Mar 26 jQuery

VUE项目实现主题切换的多种方法

Nov 26 Vue.js

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