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 相关文章推荐
基于jquery的跨域调用文件
Nov 19 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
jquery中选择块并改变属性值的方法
Jul 31 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
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
openPNE常用方法分享
2011/11/29 PHP
PHP中设置时区方法小结
2012/06/03 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
2017/12/06 Javascript
js实现移动端轮播图
2020/12/21 Javascript
微信小程序结合mock.js实现后台模拟及调试
2019/03/28 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
python ChainMap的使用和说明详解
2019/06/11 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
PyTorch实现AlexNet示例
2020/01/14 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
信息管理应届生求职信
2014/03/07 职场文书
年会搞笑主持词
2014/03/27 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android