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, 都不是,就只是普通属 ...
随机推荐
- 2019年12月1日Linux开发手记
配置ubuntu摄像头: 1.设置→添加→usb控制器→兼容usb3.0 2.虚拟机→可移动设备→web camera→连接(断开主机) 3.查看是否配置成功,打开终端,输入: susb ls /de ...
- Spring Data Jpa的四种查询方式
一.调用接口的方式 1.基本介绍 通过调用接口里的方法查询,需要我们自定义的接口继承Spring Data Jpa规定的接口 public interface UserDao extends JpaR ...
- Spring（Bean）6
生命周期构造 --->set--->Bean init前后执行 (新创建 类) public class MyBeanPostProcesser implements BeanPostPr ...
- java中关键字volatile的作用(转载)
转载:http://blog.csdn.net/orzorz/article/details/4319055 用在多线程,同步变量. 线程为了提高效率,将某成员变量(如A)拷贝了一份(如B),线程中对 ...
- 【RN - 基础】之Text使用简介
基本用法 Text组件是React Native中的一个重要组件,相当于iOS中的UILabel和Android中的TextView.Text组件用来存放文本数据.下面是一个简单的例子: import ...
- MySQL 库、表、记录、相关操作（1）
库.表.记录.相关操作(1) 数据库配置 # 通过配置文件统一配置的目的:统一管理 服务端(mysqld) .客户端(client) # 配置了 mysqld(服务端) 的编码为utf8,那么再创建的 ...
- Semaphore回顾
用途 在多线程访问可变变量时,是非线程安全的.可能导致程序崩溃.此时,可以通过使用信号量(semaphore)技术,保证多线程处理某段代码时,后面线程等待前面线程执行,保证了多线程的安全性.使用方法记 ...
- Plugin execution not covered by lifecycle configuration: org.codehaus.mojo:build-helper-maven-plugin:1.8:add-test-source (execution: add-functional-source, phase: generate-sources)
在maven项目中使用add-source时,pom.xml报如下错误: Plugin execution not covered by lifecycle configuration: org.co ...
- 开发中遇到的一些bug及解决方案
一.在使用UIStackView时报“UIStackView before iOS 9.0”.
- pip-get.py安装问题
问题: 安装完成和配置环境之后:输入一个测试命令:pip help 出现下面这个问题. Fatal error in launcher: Unable to create process using ...