快捷導(dǎo)航

javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法

更新時(shí)間：2015年02月24日 15:39:32 作者：代碼家園

這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法,實(shí)例分析了javascript操作div層的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了javascript實(shí)現(xiàn)點(diǎn)擊按鈕讓DIV層彈性移動(dòng)的方法。分享給大家供大家參考。具體實(shí)現(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>點(diǎn)擊按鈕讓DIV層彈性移動(dòng)特效</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="移動(dòng)" onclick="startMove()"/>

</body>

</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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