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

jqPlot jquery的页面图表绘制工具

Jul 25 Javascript

window.onload追加函数使用示例

Mar 03 Javascript

AngularJS 文件上传控件 ng-file-upload详解

Jan 13 Javascript

JavaScript实现简单图片轮播效果

Aug 21 Javascript

jQuery实现火车票买票城市选择切换功能

Sep 15 jQuery

在Vue中使用echarts的方法

Feb 05 Javascript

微信小程序实现留言板功能

Nov 02 Javascript

详解vue2.6插槽更新v-slot用法总结

Mar 09 Javascript

Vue $mount实战之实现消息弹窗组件

Apr 22 Javascript

使用layui 的layedit定义自己的toolbar方法

Sep 18 Javascript

js实现九宫格抽奖

Mar 19 Javascript

JS如何判断对象是否包含某个属性

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