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中面向对象技术的模拟
Sep 25 Javascript
javascript prototype,executing,context,closure
Dec 24 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
js异步编程小技巧详解
Aug 14 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
JavaScript switch语句使用方法简介
Dec 30 Javascript
原生js实现点击轮播切换图片
Feb 11 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
jQuery 表格工具集
2010/04/25 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
2019/07/05 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
解决Tensorflow 使用时cpu编译不支持警告的问题
2020/02/03 Python
python3 字符串知识点学习笔记
2020/02/08 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
妇女工作先进事迹
2014/08/17 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
2015年小学生新年寄语
2014/12/08 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
python turtle绘图
2022/05/04 Python
python实现双向链表原理
2022/05/25 Python