当前位置：首页 > 编程笔记 >

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

阮喜

2023-03-14

本文向大家介绍js简单实现点击左右运动的方法，包括了js简单实现点击左右运动的方法的使用技巧和注意事项，需要的朋友参考一下

本文实例讲述了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实现图片点击左右轮播

本文向大家介绍js实现图片点击左右轮播，包括了js实现图片点击左右轮播的使用技巧和注意事项，需要的朋友参考一下这个相当于一个小框架，拿来就可以用： 1. 功能：如上图显示：点击左右两个button，可以实现图片向左右滚动，也可以设置在多少秒自己滚动。 2. 首先建立一个js文件，文件名为play.js（只要和HTML中的引入相同就可以了）： 3. 建立一个HTML文件：其中：样式自己
jQuery简单实现上下,左右滑动的方法

本文向大家介绍jQuery简单实现上下,左右滑动的方法，包括了jQuery简单实现上下,左右滑动的方法的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了jQuery简单实现上下,左右滑动的方法。分享给大家供大家参考，具体如下：渐变移动出足够的空白 -> 淡出最后一个 ->渐变移动出足够的空白我们要做的是向左移动效果.这个效果用时需添加一个DIV设置超出部分不显示,这样就可以用了. 闲话不
js实现方块上下左右移动效果

本文向大家介绍js实现方块上下左右移动效果，包括了js实现方块上下左右移动效果的使用技巧和注意事项，需要的朋友参考一下本文实例为大家分享了js实现方块移动的具体代码，供大家参考，具体内容如下以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
JS实现点击事件统计的简单实例

本文向大家介绍JS实现点击事件统计的简单实例，包括了JS实现点击事件统计的简单实例的使用技巧和注意事项，需要的朋友参考一下 JS实现网站点击事件的统计功能。点击事件上报，分为立即上报和延时上报，延时上报通过cookie存储。一、配置参数，主要用于定义上报的一些配置信息。通过在外部定义_clickc对象重置参数。参数名称类型默认值说明
js实现左右两侧浮动广告

本文向大家介绍js实现左右两侧浮动广告，包括了js实现左右两侧浮动广告的使用技巧和注意事项，需要的朋友参考一下本文实例为大家分享了js实现左右浮动广告展示的具体代码，供大家参考，具体内容如下以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
利用JS实现点击按钮后图片自动切换的简单方法

本文向大家介绍利用JS实现点击按钮后图片自动切换的简单方法，包括了利用JS实现点击按钮后图片自动切换的简单方法的使用技巧和注意事项，需要的朋友参考一下我么常常看到一个网站的主界面的图片可以切换自如，那么又是如何实现的呢？ 1.HTML页面布局如图所示： Main（div） top(div)（显示需要显示的图片） bottom UL （li）<选择>left center right 2.实现上述

相关阅读

js实现左右两侧浮动广告利用JS实现点击按钮后图片自动切换的简单方法 js实现鼠标点击左上角滑动菜单效果代码 JS简单实现自定义右键菜单实例 js实现炫酷的左右轮播图

相关文章

今日小米三面 40Min左右简单大方的简历自我介绍 2022-09-02-oppo-笔试-78min-90左右 2.4.5 ListView简单实用袋鼠云电话面 20分钟左右

相关问答

在pygame中如何区分鼠标左键点击、右键点击？[副本]如何从右向左滑动菜单滑动ExandableListView在DrawerLayout表单从右到左点击菜单将屏幕向右移动；比如脸书我如何右键单击JavaJList选择该单元格就像左键单击一样？

相关工具

左右菜单Demo 气球左右摇摆最简单代码实现九宫格简单的加入购物车动画 H 点击器

相关文档

各种算法的 Python 实现方案 Markdown 简单的世界常用算法实现方法上云如此简单简单粗暴 TensorFlow 2