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 相关文章推荐
简明json介绍
Sep 28 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
Vue实现web分页组件详解
Nov 28 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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数组函数序列之array_splice() - 在数组任意位置插入元素
2011/11/07 PHP
PHP中strcmp()和strcasecmp()函数字符串比较用法分析
2016/01/07 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
微信小程序批量上传图片到七牛(推荐)
2019/12/19 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python智联招聘爬虫并导入到excel代码实例
2019/09/09 Python
对python中return与yield的区别详解
2020/03/12 Python
一份比较全的PHP面试题
2016/07/29 面试题
《小草和大树》教学反思
2014/02/16 职场文书
合作协议书范本
2014/04/17 职场文书
2014年党支部承诺书
2014/05/30 职场文书
司法局火灾防控方案
2014/06/05 职场文书
化工见习报告范文
2014/10/31 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
无保留意见审计报告
2015/06/05 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书