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程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)動態(tài)給圖片添加邊框的方法,涉及javascript操作圖片border的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
淺析JavaScript中的變量復制、參數(shù)傳遞和作用域鏈
這篇文章主要介紹了淺析JavaScript中的變量復制、參數(shù)傳遞和作用域鏈 的相關(guān)資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了JS高階函數(shù)原理與用法,結(jié)合實例形式分析了javascript函數(shù)式編程、一等函數(shù)、高階函數(shù)等相關(guān)概念、原理及使用技巧,需要的朋友可以參考下2019-01-01
用瀏覽器無法調(diào)試異步加載頁面里包含的js文件。簡單的說就是在調(diào)試工具里面看不到異步加載頁面里包含的js文件2014-10-10
這篇文章主要為大家詳細介紹了JS自定義滾動條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
javascript宿主對象之window.navigator詳解
這篇文章主要為大家詳細介紹了javascript宿主對象之window.navigator，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要給大家介紹了關(guān)于JavaScript中全局屬性與方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-06-06![JScript|Event]面向事件驅(qū)動的編程(二)--實例講解:將span模擬成超連接](http://img.jbzj.com/images/xgimg/bcimg7.png)
JScript|Event]面向事件驅(qū)動的編程(二)--實例講解:將span模擬成超連接
JScript|Event]面向事件驅(qū)動的編程(二)--實例講解:將span模擬成超連接...2007-01-01
怎么捕獲錯誤并且處理是一門語言必備的知識,在JavaScript中也是如此,下面這篇文章主要給大家介紹了關(guān)于JavsScript中Promise錯誤捕獲的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
本篇文章主要介紹了利用javascript獲取鼠標點擊元素對象的示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12