javascript實現(xiàn)點擊按鈕讓DIV層彈性移動的方法
更新時間：2015年02月24日 15:39:32 作者：代碼家園
這篇文章主要介紹了javascript實現(xiàn)點擊按鈕讓DIV層彈性移動的方法,實例分析了javascript操作div層的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了javascript實現(xiàn)點擊按鈕讓DIV層彈性移動的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<!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>
<title>點擊按鈕讓DIV層彈性移動特效</title>
<style type="text/css">
#div1{ background: #FFCC66; border:#FF6600 1px solid; height:100px; width:100px; position:relative; left:0px;}
</style>
<script type="text/javascript">
var t=null;
function startMove()
{
if(t)
{
clearInterval(t);
}
t=setInterval(move, 30);
}
var step=0;
function move()
{
var odiv=document.getElementById("div1");
step+=(100-odiv.offsetLeft)/50;
step=step*0.98
odiv.style.left=odiv.offsetLeft+step;
}
</script>
</head>
<body>
<div id="div1">
</div>
<input type="button" value="移動" onclick="startMove()"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>點擊按鈕讓DIV層彈性移動特效</title>
<style type="text/css">
#div1{ background: #FFCC66; border:#FF6600 1px solid; height:100px; width:100px; position:relative; left:0px;}
</style>
<script type="text/javascript">
var t=null;
function startMove()
{
if(t)
{
clearInterval(t);
}
t=setInterval(move, 30);
}
var step=0;
function move()
{
var odiv=document.getElementById("div1");
step+=(100-odiv.offsetLeft)/50;
step=step*0.98
odiv.style.left=odiv.offsetLeft+step;
}
</script>
</head>
<body>
<div id="div1">
</div>
<input type="button" value="移動" onclick="startMove()"/>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
您可能感興趣的文章:
相關文章
alert(3)就這么段程序，沒有寫在function中，想啊想，怎么終止js呢？jfslk也能達到一樣的效果(終止js程序)2013-05-05
由于剛畢業(yè)的窮大學生，和朋友合租了一臺服務器開了多個端口提供 ss 服務，懶得配置 ss-panel，就使用了 ss-bash 來監(jiān)控不同端口的流量，但每次都要等上服務器才能看到流量使用情況，很麻煩，于是就寫了個簡單的頁面來提供 WEB 訪問，具體內容一起通過本文學習吧2017-03-03
對應用到對textarea處理的朋友可以參考下。控制的比較不錯的代碼封裝。2010-11-11
JavaScript中執(zhí)行上下文和執(zhí)行棧
這篇文章主要介紹了JavaScript中執(zhí)行上下文和執(zhí)行棧，執(zhí)行上下文是評估和執(zhí)行JavaScript代碼的環(huán)境的抽象概念，更多相關介紹，感興趣的朋友可以參考一下2022-09-09
JS的IE和Firefox兼容性集錦...2006-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)拖動模態(tài)框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了聊聊鑒權那些事(推薦)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
this是javascript的一個關鍵字，隨著函數(shù)使用場合不同，this的值會發(fā)生變化。但是總有一個原則，那就是this指的是調用函數(shù)的那個對象。接下來通過本文給大家介紹js中的this指針和引用，非常不錯，需要的朋友參考下2016-08-08
簡述JavaScript提交表單的方式 （Using JavaScript Submit Form）
這篇文章主要介紹了簡述JavaScript提交表單的方式 （Using JavaScript Submit Form）的相關資料,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了javascript中類的定義方式,結合實例形式較為詳細的分析了JavaScript中類的四種定義方式,具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12