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程序设计有所帮助。

Javascript 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
Oct 31 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 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
You might like
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
一端时间轮换的广告
2006/06/26 Javascript
摘自启点的main.js
2008/04/20 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
python 运算符 供重载参考
2009/06/11 Python
python字典多条件排序方法实例
2014/06/30 Python
详解在Python中处理异常的教程
2015/05/24 Python
Python对文件操作知识汇总
2016/05/15 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
表达自我的市场:Society6
2018/08/01 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
股票投资建议书
2014/05/19 职场文书
学校安全责任书范本
2014/07/23 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
python基础详解之if循环语句
2021/04/24 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏