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表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
vue-cli webpack2项目打包优化分享
Feb 07 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
vue 下列表侧滑操作实例代码详解
Jul 24 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
详解vuex之store源码简单解析
Jun 13 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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
如何做到多笔资料的同步
2006/10/09 PHP
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
Windows 下安装 swoole 图文教程(php)
2017/06/05 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python and、or以及and-or语法总结
2015/04/14 Python
便捷提取python导入包的属性方法
2018/10/15 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
新教师岗前培训方案
2014/06/05 职场文书
师德师风学习材料
2014/12/19 职场文书
个人学习总结范文
2015/02/15 职场文书
幼师求职自荐信
2015/03/26 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
python单向链表实例详解
2022/05/25 Python