编程 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 相关文章推荐

图片自动缩小点击放大

Jul 07 Javascript

Jquery AutoComplete自动完成的使用方法实例

Mar 19 Javascript

jQuery实用基础超详细介绍

Apr 11 Javascript

js实现仿Windows风格选项卡和按钮效果实例

May 13 Javascript

js实现文本框宽度自适应文本宽度的方法

Aug 13 Javascript

JavaScript判断图片是否已经加载完毕的方法汇总

Feb 05 Javascript

JavaScript动态生成二维码图片

Apr 20 Javascript

浅析location.href跨窗口调用函数

Nov 22 Javascript

Vue数组更新及过滤排序功能

Aug 10 Javascript

vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解

May 28 Javascript

详解Vue源码学习之双向绑定

Apr 10 Javascript

如何在Vue.JS中使用图标组件

Aug 04 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