JS---案例：移动元素，封装动画函数
案例：移动元素，封装动画函数
console.log(my$("dv").offsetLeft);
动画函数animate封装
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
} input {
margin-top: 20px;
} div {
margin-top: 30px;
width: 200px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head> <body>
<input type="button" value="移动到400px" id="btn1" />
<input type="button" value="移动到800px" id="btn2" />
<div id="dv"></div>
<script src="common.js"></script>
<script> //点击第一个按钮，移动到400px
my$("btn1").onclick = function () {
animate(my$("dv"), 400);
};
//点击第二个按钮，移动到800px
my$("btn2").onclick = function () {
animate(my$("dv"), 800);
}; //动画函数animate封装
function animate(element, target) {
//先清理定时器
clearInterval(element.timeId);
//一会要清理定时器 （只产生一个定时器）
element.timeId = setInterval(function () {
//获取div当前位置
var current = element.offsetLeft; //数字类型，没有px
//div每移动多少像素---步数
var step = 10;
step = current < target ? step : -step;
//每次移动后的距离
current += step;
//判断当前移动后的位置，是否达到目标位置
if (Math.abs(target - current) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 20);
} </script>
</body> </html>
JS---案例：移动元素，封装动画函数的更多相关文章
- 使用原生的javascript封装动画函数(有callback功能)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS编程练习：封装insertAfter函数(功能类似于系统insertBefor)
那么insertAfter()要实现的功能: 在指定的子节点后面插入新的子节点: 1 <body> 2 <div> 3 <p></p> 4 <sp ...
- js原生实现链式动画效果
// 1. css样式 div { width: 100px; height: 100px; background: olivedrab; position: absolute; left: 0px; ...
- 原生JS实现动画函数的封装
封装了一个JS方法,支持元素的基本动画:宽.高.透明度...等,也支持链式动画和同时运动. 获取元素的属性的函数并进行了兼容性处理: function getStyle(obj, attr) { if ...
- 使用原生JS封装一个动画函数
最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...
- JS高级---案例贪吃蛇，把封装的函数移动到js文件中
案例贪吃蛇,把封装的函数移动到js文件中 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- js 封装一个均速动画函数
//动画函数---任意一个元素移动到指定的目标位置 //element为元素 target为位置 function carToon(element, target) { //设置一个定时器让他循环去增 ...
- 移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）
移动端 css3 transition 动画 ,requestAnimationFrame 动画 对于性能的要求,h5优先考虑: 移动端 单页有时候 制作只用到简单的css3动画即可,我们封装一下, ...
- JS---最终版本--封装缓动（变速）动画函数---增加任意多个属性&回调函数&层级&透明度
封装缓动(变速)动画函数---增加任意多个属性&回调函数&层级&透明度 相较之前的,增加了2个判断,第一个判断是不是透明度,第二个判断是不是zindex, 都不是,就只是普通属 ...
随机推荐
- 【Luogu P3834】可持久化线段树（主席树）
Luogu P3834 可持久化数据结构就是支持在历史版本上进行查询和修改操作的数据结构. 主席树就是对线段树的改进,使之可持久化. 前置知识:动态开点线段树 我们利用权值(值域)线段树统计区间内的数 ...
- Spring Boot整合Mybatis报错InstantiationException: tk.mybatis.mapper.provider.base.BaseSelectProvider
Spring Boot整合Mybatis时一直报错 后来发现原来主配置类上的MapperScan导错了包 由于我使用了通用Mapper,所以应该导入通用mapper这个包
- JavaScript-----2初识
1.介绍 JavaScript是一种运行在客户端(自己的电脑上)的脚本语言不是在服务器上 脚本语言:不需要编译,运行过程由JS解释器(js引擎)逐行进行解释并执行 JavaScript不仅可以做前端编 ...
- 【Android - 进阶】之PopupWindow的使用
创建一个类继承自PopupWindow,编写自定义的PopupWindow类.示例代码如下: import android.app.Activity; import android.graphics. ...
- Vsftp与PAM虚拟用户
使用yum 安装vsftp yum install vsftpd pam pam-* db4 db4-* 创建一个保存用户及密码的文件 cd /etc/vsftpd/ touch virtual_lo ...
- 队列&生产者消费者模型
队列 ipc机制:进程通讯 管道:pipe 基于共享的内存空间 队列:pipe+锁 queue from multiprocessing import Process,Queue ### 案例一 q ...
- synchronized被这么问，谁能受得了
synchronized是面试中经常会被问到的知识点,相关的问题点也很多,问题答案涉及的知识点也很多,有经验的面试官就会顺着你的答案不断追问一下,下面的对话场景就是相关面试题的连环炮. 面试官:说一下 ...
- 工作中的开发过程（Javaweb路线，写给刚刚实习或者马上就要工作的朋友）
工作中的开发过程(Javaweb路线,写给刚刚实习或者马上就要工作的朋友) 当我还没开始工作的时候,我是对实际项目开发流程充满未知和向往的,当时很希望能够有一个过来人,给我介绍一下实际工作起来是什么样 ...
- Jest测试框架入门
近年来,随着前端工程化的发展,前端发生了翻天覆地的变化.jQuery已经慢慢淡出了我们的视野,React.Vue和anglur三驾马车急速驶来.从此,前端进入了数据驱动的时代,也有了清晰的模块化开发的 ...
- 创建raid10（五块磁盘）
创建raid10(五块磁盘) Raid10(5块磁盘) 上一个bolg已经做了raid5(3 个raid. 2个备份),在此条件下继续以下步骤: 1.先将磁盘系统卸载 2.看系统挂载里是否还有md0 ...