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 相关文章推荐
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
js实现缓动动画
Nov 25 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
PHP similar_text 字符串的相似性比较函数
2010/05/26 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
[54:05]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第一场 1月9日
2021/03/11 DOTA
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Python标准库itertools的使用方法
2020/01/17 Python
Python Selenium 设置元素等待的三种方式
2020/03/18 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
全球最大的游戏市场:G2A
2018/07/05 全球购物
实习求职信
2013/12/01 职场文书
会议开场欢迎词
2014/01/15 职场文书
小学生元旦广播稿
2014/02/21 职场文书
企业挂职心得体会
2014/09/10 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
公司离职证明标准格式
2014/11/18 职场文书
债务纠纷起诉书
2015/05/20 职场文书
毕业生自荐求职信书写的技巧
2019/08/26 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
MySQL数据库完全卸载的方法
2022/03/03 MySQL