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 Keycode对照表
Oct 24 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
jquery 使用点滴函数代码
May 20 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
Vuex 使用及简单实例(计数器)
Aug 29 Javascript
Vue实现下拉加载更多
May 09 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
PHP生成随机字符串(3种方法)
2015/09/25 PHP
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
jQuery select表单提交省市区城市三级联动核心代码
2014/06/09 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
JavaScript中关于class的调用方法
2017/11/28 Javascript
基于vue开发的在线付费课程应用过程
2018/01/25 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
vue之延时刷新实例
2019/11/14 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
QML使用Python的函数过程解析
2019/09/26 Python
Python ORM编程基础示例
2020/02/02 Python
pytorch SENet实现案例
2020/06/24 Python
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
生日寄语大全
2014/04/08 职场文书
个人投资计划书
2014/05/01 职场文书
专题组织生活会方案
2014/06/15 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
个人借款协议书范本
2014/11/17 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python