javascript实现点击按钮让DIV层弹性移动的方法
更新时间：2015年02月24日 15:39:32 作者：代码家园
这篇文章主要介绍了javascript实现点击按钮让DIV层弹性移动的方法,实例分析了javascript操作div层的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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>
<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程序设计有所帮助。
相关文章
alert(3)就这么段程序，没有写在function中，想啊想，怎么终止js呢？jfslk也能达到一样的效果(终止js程序)2013-05-05
由于刚毕业的穷大学生，和朋友合租了一台服务器开了多个端口提供 ss 服务，懒得配置 ss-panel，就使用了 ss-bash 来监控不同端口的流量，但每次都要等上服务器才能看到流量使用情况，很麻烦，于是就写了个简单的页面来提供 WEB 访问，具体内容一起通过本文学习吧2017-03-03
对应用到对textarea处理的朋友可以参考下。控制的比较不错的代码封装。2010-11-11
这篇文章主要介绍了JavaScript中执行上下文和执行栈，执行上下文是评估和执行JavaScript代码的环境的抽象概念，更多相关介绍，感兴趣的朋友可以参考一下2022-09-09
JS的IE和Firefox兼容性集锦...2006-12-12
这篇文章主要为大家详细介绍了js实现拖动模态框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了聊聊鉴权那些事(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
this是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。接下来通过本文给大家介绍js中的this指针和引用，非常不错，需要的朋友参考下2016-08-08
简述JavaScript提交表单的方式 （Using JavaScript Submit Form）
这篇文章主要介绍了简述JavaScript提交表单的方式 （Using JavaScript Submit Form）的相关资料,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了javascript中类的定义方式,结合实例形式较为详细的分析了JavaScript中类的四种定义方式,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
最新评论