JS div匀速移动动画与变速移动动画代码实例
1.匀速移动代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
margin-top: 20px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv">
<script src="common.js"></script>
<script>
//点击按钮移动div
my$("btn1").onclick = function () {
animate(my$("dv"), 400);
};
my$("btn2").onclick = function () {
animate(my$("dv"), 800);
};
//匀速动画
function animate(element, target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = element.offsetLeft;
//移动的步数
var step = 10;
step = target > current ? step : -step;
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 20);
}
</script>
</div>
</body>
</html>
2.变速移动代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
margin-top: 20px;
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1"/>
<input type="button" value="移动到800px" id="btn2"/>
<div id="dv">
<script src="common.js"></script>
<script>
//点击按钮移动div
my$("btn1").onclick = function () {
animate(my$("dv"), 400);
};
my$("btn2").onclick = function () {
animate(my$("dv"), 800);
};
//变速动画
function animate(element, target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = element.offsetLeft;
//移动的步数
var step = (target-current)/10;
step = step>0?Math.ceil(step):Math.floor(step);
current += step;
element.style.left = current + "px";
if(current==target) {
//清理定时器
clearInterval(element.timeId);
}
}, 20);
}
</script>
</div>
</body>
</html>
common.js
/**
* 获取指定标签对象
* @param id 标签的id属性值
* @returns {Element}根据id属性值返回指定标签对象
*/
function my$(id) {
return document.getElementById(id);
}
以上所述是小编给大家介绍的JS div匀速移动动画与变速移动动画详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
使用JavaScript 实现对象 匀速/变速运动的方法
实例1--控制一个对象的匀速移动和停止 HTML: 复制代码 代码如下: <input id="btn" type="button" value=" Move It ! "/> <div id="d1"> <img id="i1" src="1.jpg" alt/> </div> JS:实现向右运动 复制代码 代码
-
javascript 变速加数功能实现代码
用户单击其中一个按钮,可以让数字加1,单击另外一个按钮则让数字减1,如果按住按钮不放,文本框的数值会越加越快或越减越快,即变速加数功能.比如你打开电脑的"时间和日期属性"窗口,你按下图红框标识的上下按钮调整时间,试着单击与按着鼠标不放,你会发现它的功能与我说的一样(准确说还是有区别的,它按下鼠标不放加数速度是快了,但不会越来越快.我的例子是越加越快,这更适合数值比较大的数据提供场合). 代码很简单,都加了注释,就不知道实现的够不够科学,如果你有更好的建议不妨与我分享.HTML与Java
-
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
一个div的运动其实就是它与浏览器边框的距离在变动.如果他变化的速率一定,那就是匀速运动:如果变化的速率不一定,那么就是变速运动.当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动. 其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离. 比如匀速运动: 进入定时器:(每隔30ms做) if(是否到达终点) { 停止定时器} else do{ 改变距离} 改变距离的方法决定是匀速还是变速(缓冲)运动. 匀速的比如: 复制代码 代码如下
-
实现变速回到顶部的JavaScript代码
随着近几年来 JavaScript 的应用日渐广泛, 滑动效果无处不在, 于是我也跟跟风, 将置顶功能做成了滑动效果. 后来为了更贴合物理特征, 改造做成了减速的滑动效果. 首先说一下原理吧. 我们会获取滚动条到页面顶部的距离, 然后上移一定的距离; 再获取滚动条到页面顶部的距离, 上移一定的距离 (比上一次小一点); ... JavaScript 代码: 复制代码 代码如下: /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (
-
JavaScript变速动画函数封装添加任意多个属性
下面通过实例代码给大家介绍JavaScript变速动画函数封装添加任意多个属性 ,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } div { width: 200px; height
-
JS div匀速移动动画与变速移动动画代码实例
1.匀速移动代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { margin-top: 20px; width: 200px; height: 100px; background
-
JS实现匀速与减速缓慢运动的动画效果封装示例
本文实例讲述了JS实现匀速与减速缓慢运动的动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net JS匀速/减速运动</title> <style> *{ margin: 0; padding: 0; } .box1 { width
-
js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes
-
JS+DIV+CSS实现的经典标签切换效果代码
本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码.分享给大家供大家参考.具体如下: 这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-bq-cha-tab-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
-
使用 js 简单的实现 bind、call 、aplly代码实例
这篇文章主要介绍了使用 js 简单的实现 bind.call .aplly代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Function.prototype._call = function(obj,...arg){ var me = this; var k = Symbol("test"); //生成唯一的 key obj[k] = me; var result = obj[k](...arg); delete obj[k
-
JS实现“全选”和"全不选"功能代码实例
这篇文章主要介绍了JS实现"全选"和"全不选"功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head&g
-
JS+DIV实现鼠标划过切换层效果的实例代码
<style>/*栏目切换样式开始*/.none {display: none;}.block {display: block;}/*头部样式*/.s_c {width:800px;text-align: center;}.s_c ul{clear:both;margin:0;}.s_c li{list-style:none;float:left;position: relative;width: 70px;}/**/.c_0 {background-color: #CCCCCC;} /*隐藏
-
JS数组array元素的添加和删除方法代码实例
js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^ var arr = new Array(); arr[0] = "aaa"; arr[1] = "bbb"; arr[2] = "ccc"; //alert(arr.length);//3 arr.pop(); //alert(arr.length);//2 //alert(arr[arr.length-1]);//bbb arr.pop(); //al
-
js中去除字符串中所有的html标签代码实例
对于获取了一大堆字符串但是又不想要里面的html标签怎么办? 特别是像博客园这个富文本框中,可以带样式的,取出来的文章内容也是带样式的. 但是在某些地方只要显示文本不想显示其他标签,只好这样做. <script type="text/javascript"> $(function(){ var list = $(".zhaiyao");//获取class所有元素 for(var i = 0 ; i< list.length ; i ++ ){ va
-
JS实现从顶部下拉显示的带动画QQ客服特效代码
本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码.分享给大家供大家参考,具体如下: 这是一款动画版QQ在线客服代码,从网页顶部下拉出来的QQ客服,下滑结束后有弹性缓冲效果.在世界地图的映衬下,似乎一下子上升了品位.动画效果是由jq实现的,QQ客服的一些信息自己修改下,换成你自己的QQ,上传到网页就可用啦.注:在火狐台chrome浏览器中测试效果会更好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-show-down-