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-简单的计算器实现步骤分解(附图)
May 30 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
Vue常用指令详解分析
Aug 19 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
Nov 09 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
Aug 18 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 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
mysql时区问题
2008/03/26 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
jQuery 源码分析笔记
2011/05/25 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php实现简单爬虫的开发
2016/03/28 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
动态样式类封装JS代码
2009/09/02 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
js对象的比较
2011/02/26 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
2015/02/02 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python getopt 参数处理小示例
2009/06/09 Python
使用python实现baidu hi自动登录的代码
2013/02/10 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
在django中,关于session的通用设置方法
2019/08/06 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
计算机软件个人的自荐信范文
2013/12/01 职场文书
施工人员岗位职责
2013/12/12 职场文书
九年级化学教学反思
2014/01/28 职场文书
董事长助理岗位职责
2014/02/18 职场文书
医院保洁服务方案
2014/06/11 职场文书
个人收入证明模板
2014/09/18 职场文书
个人汇报材料范文
2014/12/30 职场文书
python基础之while循环语句的使用
2021/04/20 Python