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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
JS简单获取当前日期和农历日期的方法
Apr 17 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
基于jquery实现左右上下移动效果
May 02 jQuery
详解jQuery中的easyui
Sep 02 jQuery
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 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 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
php获取网页请求状态程序示例
2014/06/17 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
[02:52]2014DOTA2西雅图国际邀请赛 CIS战队巡礼
2014/07/07 DOTA
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
Python找出list中最常出现元素的方法
2016/06/14 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
关于Python数据结构中字典的心得
2017/12/04 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
python 读取、写入txt文件的示例
2020/09/27 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
深入浅析css3 border-image边框图像详解
2015/11/24 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
Rockport乐步美国官网:风靡美国的白宫鞋
2016/11/24 全球购物
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
销售助理岗位职责
2014/02/21 职场文书
生态养殖创业计划书
2014/05/06 职场文书
后天观后感
2015/06/08 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
详解Java实践之建造者模式
2021/06/18 Java/Android
javascript函数式编程基础
2021/09/15 Javascript