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中两种类型的全局对象/函数
Dec 05 Javascript
Jquery中的层次选择器与find()的区别示例介绍
Feb 20 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 Javascript
Jquery实现动态切换图片的方法
May 18 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
微信小程序开发探究
Dec 27 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php-fpm配置详解
2014/02/12 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
详解Python核心对象类型字符串
2018/02/11 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
阿波罗盒子:Apollo Box
2017/08/14 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL