js簡單實現(xiàn)點擊左右運動的方法
更新時間：2015年04月10日 10:42:31 作者：jingangel
這篇文章主要介紹了js簡單實現(xiàn)點擊左右運動的方法,實例分析了javascript實現(xiàn)左右運動的相關要點與技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了js簡單實現(xiàn)點擊左右運動的方法。分享給大家供大家參考。具體分析如下：
這里可實現(xiàn)點擊向右，方塊向右移動，點擊向左，方塊向左移動的效果
可以用setInterval來實現(xiàn)過多長時間，div移動多長的距離來實現(xiàn)運動效果。
要點一：如果元素的左邊距離小于目標距離，則是正向移動，否則是負向移動
if(run.offsetLeft <target){
speed = 2;
}else{
speed = -2;
}
要點二：如果元素的左邊距離等于目標距離，停止定時器，否則，元素的左邊距離等于現(xiàn)在的左邊距離加上速度值。
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實現(xiàn)連續(xù)滾動字幕效果的方法
這篇文章主要介紹了使用JavaScript實現(xiàn)連續(xù)滾動字幕效果的方法,文中給出了瀏覽器端運行的示例腳本,需要的朋友可以參考下2015-07-07
原理其實就是通過在固定地址后面，加上一個不同值的日期數(shù)值，以達到地址不重復的目的，讓瀏覽器每次都實時加載，不從緩存中讀取文件2013-01-01
擴展運算符 (spread syntax) 是 ES6 提供的一種非常便捷的新語法，給我們操作數(shù)組和對象帶來了非常大的便利，我在很多文章中也提到了這個語法。但是其實擴展運算符的用法還是比較多比較雜的，我用一篇文章來做一下總結，梳理一下擴展運算的語法和使用細節(jié)。2020-11-11
詳解JS數(shù)據(jù)類型的值拷貝函數(shù)（深拷貝）
這篇文章主要介紹了詳解JS數(shù)據(jù)類型的值拷貝函數(shù)（深拷貝）的相關資料，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-07-07
這篇文章主要為大家詳細介紹了JavaScript的setter與getter方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11![JS中的==運算： [''''] == false —>true](http://img.jbzj.com/images/xgimg/bcimg5.png)
JS中的==運算： [''''] == false —>true
這篇文章主要介紹了JS中的==運算： [''] == false —>true的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)分頁點擊控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
淺談javascript中call()、apply()、bind()的用法
一直對Javascript中的apply/call/bind的用法很模糊，恰好看到了這篇文章。對三者之間的區(qū)別與聯(lián)系算是有了比較清晰的認識。這里記錄下來，分享給大家。2015-04-04
Javascript中有3個事件句柄在對應鍵盤的輸入狀態(tài):按鍵被按下（按下按鍵但還沒有抬起）、點擊按鍵（按下并抬起按鍵）、按鍵抬起（按鍵抬起之后）,接下來詳細介紹，感興趣的朋友可以了解下2013-01-01
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)js浮動框，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12