编程 Javascript

javascript实现点击按钮让DIV层弹性移动的方法

Posted in Javascript onFebruary 24, 2015

本文实例讲述了javascript实现点击按钮让DIV层弹性移动的方法。分享给大家供大家参考。具体实现方法如下：

<!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>

希望本文所述对大家的javascript程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

走出JavaScript初学困境—js初学

Dec 29 Javascript

JavaScript等比例缩放图片控制超出范围的图片

Aug 06 Javascript

js控制分页打印、打印分页示例

Feb 08 Javascript

JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

Sep 24 Javascript

js仿京东轮播效果选项卡套选项卡使用

Jan 12 Javascript

Angularjs使用过滤器完成排序功能

Sep 20 Javascript

JavaScript数据结构之单链表和循环链表

Nov 28 Javascript

javaScript字符串工具类StringUtils详解

Dec 08 Javascript

JS 封装父页面子页面交互接口的实例代码

Jun 25 Javascript

vue实现点击追加选中样式效果

Nov 01 Javascript

Vue分页效果与购物车功能

Dec 13 Javascript

Echarts.js无法引入问题解决方案

Oct 30 Javascript

JS+CSS实现仿新浪微博搜索框的方法

Feb 24 #Javascript

JS实现让访问者自助选择网页文字颜色的方法

Feb 24 #Javascript

JS给超链接加确认对话框的方法

Feb 24 #Javascript

javascript实现图片循环渐显播放的方法

Feb 24 #Javascript

javascript感应鼠标图片透明度显示的方法

Feb 24 #Javascript

javascript文本框内输入文字倒计数的方法

Feb 24 #Javascript

jQuery实现感应鼠标动画效果自动伸长的输入框实例

Feb 24 #Javascript