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 isArray()函数判断对象类型的种种方法
Oct 11 Javascript
动态加载js的方法汇总
Feb 13 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
每天一篇javascript学习小结(Array数组)
2015/11/11 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
台湾森森购物网:U-mall
2017/10/16 全球购物
新大陆软件面试题
2016/11/24 面试题
四好少年事迹材料
2014/01/12 职场文书
保密承诺书
2014/03/27 职场文书
求职信怎么写范文
2014/05/26 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书